👟
use-transition-state
useTransition + useState = useTransitionState
[](https://www.npmjs.com/package/use-transition-state)
[](https://www.npmtrends.com/use-transition-state)
[](https://bundlephobia.com/result?p=use-transition-state)
[](#contributors-)
## Announcement
This hook builds on top of [React.useTransition](https://github.com/reactwg/react-18/discussions/41) to reduce the verbose of using in conjunction with [React.useState](https://reactjs.org/docs/hooks-reference.html#usestate). However, the `React.useTransition` comes from [React v18](https://github.com/reactwg/react-18) 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](https://www.npmjs.com/package/use-transition-state).
```sh
$ yarn add use-transition-state
# or
$ npm install --save use-transition-state
```
## Basic Usage
Here's the basic concept of how it rocks.
Before:
```js
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 (
);
};
```
After:
```js
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 (
);
};
```
## API
The DX of the hook is similar with [React.useState](https://reactjs.org/docs/hooks-reference.html#usestate). You can also access all the APIs of [React.useTransition](https://github.com/reactwg/react-18/discussions/41) when needed.
```js
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](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
