👟


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.

``sh
$ yarn add use-transition-state


or

`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 (


`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 (


`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):

Welly 🤔 💻 📖 🚇 🚧

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