I have a functional component where I get a value from my localStorage and use that value to set a value in a state:
localforage.getItem<string>('sortType').then((value) => {
setSortType(value)
})
const [sortType, setSortType] = useState('release_date');
When I run the component I get a log:
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.
I've read that this happens because I'm using a async method localforage.getItem
on a state. But I haven't found a solution that would work in a functional component.
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.
In the unmounting (or deletion, or "cleanup") phase, we have just one lifecycle method to help us out: componentWillUnmount . componentWillUnmount is the last function to be called immediately before the component is removed from the DOM.
You can just unmount it conditionally. All you have to do is remove it from the DOM in order to unmount it. As long as renderMyComponent = true , the component will render. If you set renderMyComponent = false , it will unmount from the DOM.
To check if the React component is unmounted, we can set a state in the callback that's returned in the useEffect hook callback. We create the isMounted state with the useState hook. Then we call the useEffect hook with a callback that calls setIsMounted to set isMounted to true .
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.
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. at SetStateWarning (http://localhost:3000/static/js/bundle.js:639:80) This warning is pointing out that we can’t perform a React state update on an unmounted component.
One thing is certain that somewhere in your code you are using setState or useState hook function even after unmounting the component. The issue is not, why we are getting this warning, else, we need to know how to deal with it properly.
We saw how a simple component with an asynchronous state update may yield this common warning, think about all those components you have with a similar case. Make sure you check if the component is actually mounted before you perform a state update.
You are setting the state after the promise resolves, which can cause this code to run after the component has unmounted.
To resolve this, you can check if the component is still mounted before setting the state:
const isMountedRef = useRef(true)
useEffect(() => () => { isMountedRef.current = false }, [])
Since the dependency array is empty the effect is called when the component mounts, and the callback is executed when it dismounts
// somewhere in your code later
localforage.getItem<string>('sortType').then((value) => {
if (isMountedRef.current) {
setSortType(value)
}
})
Try to run the sortType from localStorage once by using React.useEffect as below:
const [sortType, setSortType] = useState('release_date');
React.useEffect(() => {
localforage.getItem<string>('sortType').then((value) => {
setSortType(value)
})
}, []);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With