Combine useTransition With useState – use-transition-state

Description:

This hook builds on top of React.useTransition to reduce the verbose of using in conjunction with React.useState.

How to use it:

1. Install and import the use-transition-state.

# Yarn
$ yarn add use-transition-state

# NPM
$ npm i use-transition-state –save

import useTransitionState from “use-transition-state”;

2. Basic usage.

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>
  );
};