Using the useRef Hook for DOM Manipulation in React

Understanding useRef in React

The useRef hook returns a mutable ref object whose .current property is initialized to the passed argument.

This ref object persists for the full lifetime of the component, allowing you to store a reference to a DOM element or any mutable value.

• Created with: const refContainer = useRef(initialValue);
• refContainer.current holds the mutable value or DOM node.
• Updating refContainer.current does not trigger re-render.

Using useRef for DOM Manipulation

You can assign a ref object to a React element's ref attribute to gain direct access to the underlying DOM node.

This allows you to perform imperative actions like focusing an input, measuring element size, or triggering animations.

• Create a ref with useRef(null).
• Attach it to a JSX element via the ref attribute.
• Access the DOM node via ref.current.

Best Practices and Common Mistakes

Using useRef effectively requires understanding when direct DOM manipulation is appropriate and how to avoid pitfalls.

• Do not use useRef to store data that affects rendering; use state instead.
• Avoid overusing refs for DOM manipulation to keep React declarative.
• Always check if ref.current is not null before accessing DOM properties.
• Clean up any event listeners or timers attached to refs to prevent memory leaks.