use-transition-state

useTransition + useState = useTransitionState

Announcement

This hook builds on top of React.useTransition to reduce the verbose of using in conjunction with React.useState. However, the React.useTransition comes from React v18 that isn't official released yet. Which means the hook is in experimental stage and API might be changed in the near future.

Requirement

To use use-transition-state, you must use react@18.0.0 or greater.

Installation

This package is distributed via npm.

$ yarn add use-transition-state
# or
$ npm install --save use-transition-state

Basic Usage

Here's the basic concept of how it rocks.
Before:

import { useState, useTransition } from "react";

const App = () => {
  const [searchQuery, setSearchQuery] = useState(null);
  const [isPending, startTransition] = useTransition({ timeoutMs: 500 });

  const handleInputChange = (e) => {
    startTransition(() => {
      setSearchQuery(getParsedData(e.target.value));
    });
  };

  return (
    <div>
      <input onChange={handleInputChange} />
      {isPending && "⏳ Loading..."}
      <div>{searchQuery || "🔍 Start search"}</div>
    </div>
  );
};

After:

import useTransitionState from "use-transition-state";

const App = () => {
  const [searchQuery, setSearchQuery, { isPending }] = useTransitionState(
    null,
    { timeoutMs: 500 }
  );

  const handleInputChange = (e) => {
    setSearchQuery(getParsedData(e.target.value));
  };

  return (
    <div>
      <input onChange={handleInputChange} />
      {isPending && "⏳ Loading..."}
      <div>{searchQuery || "🔍 Start search"}</div>
    </div>
  );
};

API

The DX of the hook is similar with React.useState. You can also access all the APIs of React.useTransition when needed.

const [
  state,
  setState, // A React dispatch function with `startTransition`
  {
    isPending,
    startTransition,
    setState, // A React dispatch function without `startTransition`
  },
] = useTransitionState(initialState, { timeoutMs });

Contributors ✨

Thanks goes to these wonderful people (emoji key):

<td align="center"><a href="http://wellyshen.com"><img src="https://avatars.githubusercontent.com/u/21308003?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Welly</b></sub></a><br /><a href="#ideas-wellyshen" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/wellyshen/use-transition-state/commits?author=wellyshen" title="Code">💻</a> <a href="https://github.com/wellyshen/use-transition-state/commits?author=wellyshen" title="Documentation">📖</a> <a href="#infra-wellyshen" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-wellyshen" title="Maintenance">🚧</a></td>

This project follows the all-contributors specification. Contributions of any kind welcome!