React Hooks Can't perform a React state update on an unmounted component in React JS

React Hooks Can't perform a React state update on an unmounted component in React JS

Error:

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.

The solution is to use a local variable that keeps track of whether the component is mounted or not. This is a common pattern with the class based approach.

Here is an example given below with Product Component, where we create a isMounted variable with the initial value of false. The useEffect() hook is called when the component is mounted and sets the isMounted current variable value to true. The return function from the useEffect() hook is called when the component is unmounted and sets the isMounted current variable value to false.

Hope this helps you.

Thanks for reading.