How do you access the DOM element in React?

Question

How do you access the DOM element in React?

Answer

Use refs. React provides the useRef() hook to directly reference DOM elements.

import { useRef, useEffect } from 'react';

function InputFocus() {
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} placeholder='Focus me on mount' />;
}

Here’s what happens:

• useRef() creates a reference object
• ref={inputRef} binds it to an element
• You can access it via inputRef.current

Real-World Example

• Focusing input fields
• Controlling scroll
• Accessing canvas/video
• Integrating with third-party libraries

Quick Practice

Make an input field auto-focus on mount, and add a button to clear its value using useRef.

Summary

Refs give you a safe way to reach into the DOM — no need for query selectors.