Black BeltusereflockPREMIUM

Inline Ref Callback Called Twice During Re-renders Because React Clears the Old Ref First

A developer attaches an inline arrow function directly to a ref prop to measure an element on mount.

REACT_MODULE // 0x42

function Panel() {
const [height, setHeight] = useState(0);
return (
<div
ref={(node) => {
if (node) setHeight(node.offsetHeight);
}}
>
Content
</div>
);
}

Why does this ref callback actually run twice on every re-render of Panel - once with null and once with the div element - even though the developer only expected one call per render?

lock

This Drill is Locked

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

CONTINUE DRILLarrow_forward