Blue BeltusereflockPREMIUM

Refs to Non-Conditional DOM Elements Are Guaranteed to Be Set Before useEffect Runs

A component measures a DOM node's height as soon as it mounts.

REACT_MODULE // 0x42

function Box() {
const boxRef = useRef(null);
useEffect(() => {
console.log(boxRef.current.getBoundingClientRect().height);
}, []);
return <div ref={boxRef}>Content</div>;
}

Why is boxRef.current guaranteed to be a valid DOM node when this effect runs, rather than null?

lock

This Drill is Locked

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

CONTINUE DRILLarrow_forward