Black BeltstrictmodelockPREMIUM

useRef Mount-Guard Pattern Is Bypassed by StrictMode and Is Not the Correct Fix

A developer wants to skip running an effect on the component's very first render, only running it on subsequent updates.

REACT_MODULE // 0x42

function FilteredList({ filter }) {
const isFirstRender = useRef(true);
useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
return;
}
fetchFiltered(filter);
}, [filter]);
return <ul>...</ul>;
}

Why does this useRef-based mount guard fail to reliably skip the first real invocation under React 18's StrictMode in development?

lock

This Drill is Locked

This is a premium drill. Continue on to the next free drill in the sequence.

CONTINUE DRILLarrow_forward