In this React 19 tutorial, I show you one of the most common reasons refs exist in React: interacting directly with the DOM. React is declarative—ideally, you describe what the UI should look like and React updates the DOM for you. But there are a few practical situations where you need a direct handle to an element, like focusing an input, scrolling something into view, or measuring an element’s size and position. That’s where refs come in. I build a simple example called `FocusInput`: an input field and a button. When you click the button, the input should automatically receive focus. To do that, I create a ref with `useRef(null)`, attach it to the input using the `ref` prop, and then call `inputRef.current.focus()` inside a click handler. It’s a clean, minimal example that demonstrates how React assigns the DOM node to `ref.current`. I also point out an important takeaway: refs are an escape hatch—necessary, but something you should use sparingly. If you’re constantly manipulating the DOM, you’re probably fighting React instead of working with it.