I do not understand what is happening with useEffect here - reactjs

Question

I am trying to load a user if the token in localStorage is found. Of course, nowhere in my code am I assigning true to isAuthenticated but my question more so is if I do the following...
const [isAuthenticated, setIsAuthenticated] = useState(false);
useEffect(() => {
let mounted = true;
setIsAuthenticated(false);
const loadUser = async () => {
await fetch('http://localhost:5000/api/auth', {
method: 'GET',
headers: {
'x-auth-token': localStorage.token,
},
});
if (!mounted) {
setIsAuthenticated(false);
}
};
loadUser();
return () => {
mounted = false;
};
}, []);
I do not get this issue...
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.
However, if I were to change the
if (!mounted) {
setIsAuthenticated(false);
}
to
if (!mounted) {
setIsAuthenticated(true);
}
I do get that warning and I'm just wondering why this happens so that I know how to deal with it properly whenever it comes up.

Answer 1

The warning is:
Warning: Can't perform a React state update on an unmounted component.
You can call the state setter but you can't change the state because that will cause a re render but React can't re render because the component has been unmounted, see code below:
const Working = () => {
const [value, setValue] = React.useState(true);
React.useEffect(() => {
//not changing the value
setTimeout(() => setValue(true), 100);
});
return `value is: ${value}`;
};
const Warning = () => {
const [value, setValue] = React.useState(true);
React.useEffect(() => {
//changing the value causes re render
// but component was unmounted by App
setTimeout(() => setValue(false), 100);
});
return `value is: ${value}`;
};
const App = () => {
const [remount, setRemount] = React.useState(true);
const causeWarning = () => {
setRemount(false);
Promise.resolve(true)
.then(setRemount)
.then(() => setRemount(false));
};
return (
<div>
<button onClick={causeWarning}>cause warnig</button>
{remount && <Working />}
{remount && <Warning />}
</div>
);
};
It's best to not call the state setter at all when the component was unmounted:
if (mounted) {
setIsAuthenticated(false);
}
The part where the warning says:
This is a no-op, but it indicates a memory leak in your application.
Means that you may

Answer 2

you have to do like this
useEffect(() => {
let mounted = true;
setIsAuthenticated(false);
const loadUser = async () => {
await fetch('http://localhost:5000/api/auth', {
method: 'GET',
headers: {
'x-auth-token': localStorage.token,
},
}).then(()=> {
if (!mounted) {
setIsAuthenticated(true);
}
});
};
loadUser();
return () => {
mounted = false;
};
}, []);