Silencing with a ref makes it worse
Uses <StrictMode> on purpose. The ref keeps its value through the simulated remount, so the second setup returns early, but the first run's cleanup already disconnected. The room ends up with no connection at all. Delete the two ref lines: the plain effect with cleanup is the fix.
In development only, <StrictMode> renders every component twice and runs every effect setup → cleanup → setup when it first mounts, so missing cleanups and impure renders show up immediately; the fix is always to make the effect symmetric, never to stop it running twice.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
This component ticks twice as fast in development. Fix it:
``jsx
function Clock() {
const [s, setS] = useState(0);
useEffect(() => {
setInterval(() => setS((x) => x + 1), 1000);
}, []);
return <p>{s}</p>;
}
Write a Subscriber that calls store.subscribe(fn) (which returns an unsubscribe function) and survives StrictMode.
Explain it without notes
What exactly does StrictMode do in development, and what does it do in production?
Why does React run effects setup → cleanup → setup in StrictMode? What bugs does it catch?
Why is a useRef guard the wrong fix for an effect that runs twice?
Your data fetch fires twice in development. Is that a problem? How do you make it correct?
Preview
Console
Nothing logged yet.Expected console output
connect to general | open connections: 1
disconnect from general | open connections: 0
after mount, open connections: 0