When we call window.location.reload()
:
The entire page i.e. React, the DOM, and our JavaScript environment are torn down by the browser.
This does not give React a chance to unmount component, instead the browser just throws everything away and reloads from scratch, which means React does not run our cleanup functions.
Let's take this example :
useEffect(() => {
console.log("Effect runs in line 1");
return () => {
console.log("Cleanup runs in line 15");
};
}, []);
const handleReload = () => {
window.location.reload();
};
When the component first mounts, we'll see 'Effect runs in line 1', now when we click a button that triggers reload, the browser discards the page. So we'll never see 'Cleanup run in line 15', cause React never got a chance to execute it.
Coming to the point answer : No window.location.reload()
does not trigger the useEffect
cleanup.
The browser reload wipes the page, React is gone, so React can’t run the cleanup.