useStateLazy

A hook for updating state only if the component is mounted. Find it on npm, or add it to your project :

npm install use-state-lazy
# or
yarn add use-state-lazy

If the installation fails because of dependency.

npm install use-state-lazy --legacy-peer-deps

What can this solve

Use this hook just like React's useState.

This one hook only updates state if the component that called this hook is mounted. This allows us to avoid memory leaks and messages like this one :

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.

How to use

Replace useState with useStateLazy, and it will take effect.

Examples

Basic usage

const [count, setCount] = useStateLazy(0);