[React](/courses/reactjs) normally manages DOM elements for you, but sometimes a component needs direct access to a specific element. `useRef` provides a safe way to keep a reference to that DOM [node](/courses/nodejs). ### Basic Example ```jsx import { useRef } from "react"; function SearchBox() { const inputRef = useRef(null); function focusInput() { inputRef.current.focus(); } return ( <> ); } ``` ### What Happens Here? First: ```jsx const inputRef = useRef(null); ``` creates the ref object. Then: ```jsx ``` asks [React](/courses/reactjs) to place the DOM [node](/courses/nodejs) into: ```javascript inputRef.current ``` After the element is mounted, conceptually: ```text inputRef.current ↓ actual DOM element ``` You can then use DOM methods such as: ```javascript inputRef.current.focus(); ``` ### Common DOM Ref Operations Refs can be useful for: ```text Focusing inputs Selecting text Scrolling to an element Measuring element dimensions Controlling media playback Integrating third-party DOM libraries ``` ### Scroll Example ```jsx function Page() { const sectionRef = useRef(null); function scrollToSection() { sectionRef.current.scrollIntoView({ behavior: "smooth" }); } return ( <>

Target Section

); } ``` ### Media Example ```jsx function VideoPlayer() { const videoRef = useRef(null); function playVideo() { videoRef.current.play(); } function pauseVideo() { videoRef.current.pause(); } return ( <>