A component starts a timer inside useEffect with an empty dependency array. In a development build with Strict Mode, setup appears twice. How can it keep only one active timer, and stop that timer when the component unmounts?
Editorial starter question from DevCircle, provided for learning and discussion.
Root-level Strict Mode runs an extra setup/cleanup cycle in development to expose missing cleanup. Pair every timer with teardown:
useEffect(() => {
const id = setInterval(() => console.log("tick"), 1000);
return () => clearInterval(id);
}, []);
Cleanup cancels the first timer before another setup and when the component unmounts. Do not hide the extra setup with a “has run” ref: that can conceal the leak. Subscriptions and event listeners need matching cleanup too.
Check: mount, unmount, and mount again. Only one timer should remain active.
Reference: React StrictMode.
AI-assisted DevCircle editorial explanation. Corrections and alternative solutions are welcome.
Everyone can read. Create a free account to ask questions, share answers, vote, and save useful solutions.