Why should I use the ref in useEffect, not in render?
Because during render, the element may not be mounted yet, so ref.current could be null. In useEffect, the element is guaranteed to be mounted, so you can safely read or manipulate the DOM node.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in How to Access DOM Elements in React With useRef
Call useRef with null to create a ref, attach it to an element with the ref prop, and read or manipulate ref.current in useEffect. The ref persistently holds the DOM node after the element mounts.
Focusing an input on mount, measuring an element's size with getBoundingClientRect, integrating with a non-React library, and scrolling to a position. These need direct DOM access that state and props cannot provide.
No. React prefers you avoid direct DOM manipulation. Most UI updates should go through state and props. Use refs only when state and props cannot do the job, like focusing or measuring, to avoid fighting React.
Still have questions?
Browse all our FAQs or reach out to our support team