Custom hook to include a callback function for useState which was previously available for setState in class components. Read more about it here.
npm install use-state-with-callback
useStateWithCallback:
import * as React from 'react'; import useStateWithCallback from 'use-state-with-callback'; // Note: cannot be used on the server-side (e.g. Next.js) // import { useStateWithCallbackInstant } from 'use-state-with-callback'; const App = () => { const [count, setCount] = useStateWithCallback(0, currentCount => { console.log('render, then callback.'); console.log('otherwise use useStateWithCallbackInstant()'); if (currentCount > 1) { console.log('Threshold of over 1 reached.'); } else { console.log('No threshold reached.'); } }); // const [count, setCount] = useStateWithCallbackInstant(0, currentCount => { // console.log('render with instant callback.'); // if (currentCount > 1) { // console.log('Threshold of over 1 reached.'); // } else { // console.log('No threshold reached.'); // } // }); const handleClick = () => { setCount(count + 1); }; return ( <div> {count} <button type="button" onClick={handleClick}> Increase </button> </div> ); }; export default App;useStateWithCallbackLazy:
import * as React from 'react'; import { useStateWithCallbackLazy } from 'use-state-with-callback'; const App = () => { const [count, setCount] = useStateWithCallbackLazy(0); const handleClick = () => { setCount(count + 1, (currentCount) => { if (currentCount > 1) { console.log('Threshold of over 1 reached.'); } else { console.log('No threshold reached.'); } }); }; return ( <div> <p>{count}</p> <button type="button" onClick={handleClick}> Increase </button> </div> ); }; export default App;- When a state update is called with the current value and optimized away, the callback is never called.
useStateWithCallbackLazycalls the callback with the scope that existed before update, while this.setState callback can access the updated this.state andget something()computed values. This can't be fixed, but it's a problem for people who expect a drop-in replacement.- When
useStateWithCallbackLazystate is updated several times with batching (e.g. in an event handler), only the last update calls the callback.
git clone git@github.com:the-road-to-learn-react/use-state-with-callback.gitcd use-state-with-callbacknpm installnpm run test