. Advertisement .
..3..
. Advertisement .
..4..
If you see the warning error when learning the Javascript, don’t turn off the computer or close the program immediately. So what should you do? Identify the cause of the problem and check with the code/ function applying. If you still cannot fix it out, try to find the solution to settle it.
This post is an example for your answer when you get the warning message “Can’t perform a React state update on an unmounted component”. Today we are here to help you solve this problem. Let’s read this article to find the best solution for it!
When does the error ”Can’t perform a React state update on an unmounted component” happen?
When you run this program:
import {useState, useEffect} from 'react';
const App = () => {
const [state, setState] = useState('');
useEffect(() => {
// 👇️ set isMounted to true
let isMounted = true;
async function fetchData() {
const result = await Promise.resolve(['hello', 'world']);
// 👇️ only update state if component is mounted
if (isMounted) {
setState(result);
}
}
fetchData();
return () => {
// 👇️ when component unmounts, set isMounted to false
isMounted = false;
};
}, []);
return (
<div>
<h2>State: {JSON.stringify(state)}</h2>
</div>
);
};
export default App;You will get this warning message:
Can't perform a React state update on an unmounted componentYou have encountered the above error because you are attempting to upgrade the state of a component that is unmounted.
How to solve the error ”Can’t perform a React state update on an unmounted component”
Solution 1: Utilize an isMounted boolean in useEffect hook
The easiest solution to solve the error ”Can’t perform a React state update on an unmounted component” is utilizing an isMounted boolean in useEffect hook.
First, the isMounted boolean value must be initialized to true in useEffect.
Your fetchData method makes an async request to an API, which is often done, and then modifies the state based on the answer.
The isMounted variable must be set to true in order to update the state, so keep that in mind.
async function fetchData() {
const result = await Promise.resolve(['hello', 'world']);
// 👇️ only update state if component is mounted
if (isMounted) {
setState(result);
}
}After you apply this method, it will help you to avoid the warning message.
Solution 2: An initial value will be given like an argument to the useRef() hook
When the component unmounts, the function you return from the useEffect hook is called.
return () => {
// 👇️ when component is unmounted, let's set isMounted to false
isMounted = false;
};To show that up to now the component is not mounted, you set the isMounted variable to false.
The if block will not execute if your fetchData function is used after the component unmounts, due to isMounted is set to false.
async function fetchData() {
const result = await Promise.resolve(['hello', 'world']);
// 👇️ just update state if component is mounted
if (isMounted) {
setState(result);
}
}If you do this frequently, you can take out the logic inside a hook that you can reuse.
import {useState, useEffect, useRef} from 'react';
// 👇️ extract logic into reusable hook
function useIsMounted() {
const isMounted = useRef(false);
useEffect(() => {
isMounted.current = true;
return () => {
isMounted.current = false;
};
});
return isMounted;
}
const App = () => {
const [state, setState] = useState('');
// 👇️ use hook
const isMountedRef = useIsMounted();
useEffect(() => {
async function fetchData() {
const result = await Promise.resolve(['hello', 'world']);
// 👇️ only update state if component is mounted
if (isMountedRef.current) {
setState(result);
}
}
fetchData();
}, [isMountedRef]);
return (
<div>
<h2>State: {JSON.stringify(state)}</h2>
</div>
);
};
export default App;An initial value will be given like an argument to the useRef() hook. The hook will return a mutable ref object with the provided argument initialized in its.current property.
Just as you directly executed in the useEffect hook of component, you must monitor if the component is mounted in your useIsMounted hook.
Because the current property on the ref contains the ref’s real value, you should note that you must also check for it in your fetchData function.
Conclusion
Wrapping up our recommendation for fixing the error ”Can’t perform a React state update on an unmounted component”. We hope you are satisfied with our solution.
Go ahead and text your questions in the below comment box if you have any concern. While you are reading our article, if there are any better solutions, please send us your ideas and thoughts to provide better methods to correct these errors. Thank you for reading!
Read more
→ Solutions For React Native Build Error: “Undefined symbols for architecture x86_64”
Leave a comment