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 (
     <div>
       <input type="text" ref={inputRef} />
       <button onClick={handleFocus}>Focus the input</button>
     </div>
   );
 }

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