How Do You Use useRef to Access a DOM Element in React? Give an example.

The useRef hook is commonly used in React to directly reference and interact with DOM elements — like focusing an input, scrolling to a section, or controlling media elements.

When you assign a ref to a DOM element using useRef, React gives you access to the underlying DOM node via the .current property of the ref object.

Example: Focus an input

import React, { useRef } from 'react';

function FocusInput() {
const inputRef = useRef(null); // create the ref

const handleFocus = () => {
inputRef.current.focus(); // access DOM element and focus it
};

return (
<input type="text" ref={inputRef} />
<button onClick={handleFocus}>Focus the input</button>
);
}

Note: The DOM reference is only available after the component has mounted — typically accessed in useEffect or event handlers.