Fetching under StrictMode: the ignore flag
Uses <StrictMode> on purpose. Two requests start in development; the first run's cleanup set its ignore to true, so only the second response is used. In production there is one request. Data libraries also de-duplicate the request (Phase 14).
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
request 1 started for user 7
request 2 started for user 7
ignored the response from the first run
showing Asha