The answer
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.
How to Access DOM Elements in React With useRef
What are common use cases for useRef with the DOM?
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.
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.
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
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.