How do I clean up DOM work set up with useRef?
If you set up something on the DOM node, like a non-React library attaching listeners, return a cleanup function from useEffect that tears it down. This prevents leaks when the component unmounts.
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.
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.
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.
Still have questions?
Browse all our FAQs or reach out to our support team