CodePark/ questions / Refs
START PRACTICINGPRACTICE
Frontend question · React › Refs

What does this log on the component's first render?

function Search() {
  const inputRef = useRef(null);
  console.log(inputRef.current);
  return <input ref={inputRef} />;
}
null

It logs null. During the first render, the DOM node does not exist yet. React attaches the ref during the commit, the step where it applies changes to the page. This happens before layout effects and effects run.

"The <input> DOM node" is the tempting wrong answer. The node only exists after rendering finishes. Read DOM refs in effects or event handlers, not during render.