useEffect(() => {
console.log("Effect runs");
return () => {
console.log("Cleanup runs");
};
}, []);
If window.location.reload() is called anywhere in your application, will the cleanup callback of the useEffect fire?
asked Aug 16 at 22:11
Bear Bile Farming is Torture
5,4478 gold badges46 silver badges137 bronze badges
2 Answers
Typically no, the cleanup function in useEffect won’t run on window.location.reload(). Cleanup only runs when React unmounts a component or reruns the effect, but a full page reload wipes out the JS runtime before React can do anything. If you need logic before reload/close, use beforeunload instead.
2 Comments
Xavier Pedraza
"If you need logic before reload/close..." perhaps you don't. beforeonload would be the way to do that, but there are very few cases where this is actually necessary.
RomboCombo
100% agree, beforeunload is rarely needed, I just mentioned it as the way to handle reload/close since reacts cleanup won’t fire in that case.
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.
reloadfunction and observe results