useState() with confidence!
Sometimes, we accidentally try to update state on an unmounted React component. And then we get a warning like this:
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
With react-hook-use-state
, you can use useState()
hook with confidence.
This package is based on React lifecycle hooks and don't update state if React component is unmounted.
BUT ... THIS APPROACH IS AN ANTIPATTERN. CLICK HERE TO READ MORE!
I strongly encourage all asynchronous tasks should be cleaned up when React component is unmounted. But if you don't mind for some reason, this solution is for you :)
$ npm install --save react-hook-use-state
- Similar to official
useState()
, super easy!
import useState from 'react-hook-use-state';
function Counter() {
const [count, setCount] = useState(0);
// your code here
}
Website: https://wecodenow-react-hook-use-state.stackblitz.io
Playground: https://stackblitz.com/edit/wecodenow-react-hook-use-state
MIT