Blue Belt - MediumusereflockPREMIUM

Reading boxRef.current Inside useEffect on Mount

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

//REACT_MODULE

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