Refs provide a way to access DOM nodes or React elements created in the render method.
They're useful for managing focus, text selection, media playback, triggering imperative animations, and integrating with third-party DOM libraries.
Refs should be used sparingly as they break React's declarative paradigm.
They're most commonly used for accessing DOM elements directly.
import React, { useRef, useEffect } from 'react';
function TextInputWithFocusButton() { const inputRef = useRef(null);
const focusInput = () => { inputRef.current.focus(); };
return ( <> <input ref={inputRef} type="text" /> <button onClick={focusInput}>Focus Input</button> </> ); }