React Refs: An Escape Hatch for DOM Manipulation
A ref is an escape hatch to directly access a DOM node, bypassing React's declarative state flow. Use it for imperative actions like focusing an input or scrolling to an element. The footgun: overusing refs can conflict with React's rendering.
Why it exists
React's model is declarative: you describe the UI, and React updates the DOM. But some browser actions are imperative, like "focus this input now" or "scroll to this div". React has no built-in, declarative way to issue these commands, creating a need for an "escape hatch" to interact directly with the browser's DOM API.
The mental model
A ref is like a stable, private ID card for a DOM element. While your component's state and props might change, causing it to re-render, the ref always points to the actual DOM node in the browser. You can use this "ID card" to find the element and give it direct commands, like element.focus(), without going through React's state management system.
How it works
The process involves three steps. First, you declare a ref in your component using the useRef hook: const myRef = useRef(null). Second, you attach this ref to a JSX element using the ref attribute: <input ref={myRef} />. React then populates the ref's .current property with the corresponding DOM node once it's mounted. Third, you access this node in your event handlers or effects via myRef.current and call browser methods on it, for example, myRef.current.focus(). The .current property is null initially and after the component unmounts.
When to use it
Use refs for imperative actions that don't have a declarative equivalent in React. The most common cases are managing focus, text selection, or media playback; triggering imperative animations; and integrating with third-party DOM libraries that need a direct node reference. It's also used for measuring a DOM node's size or position.
When not to use it
Avoid using refs for anything that can be done declaratively with state. If you find yourself manually changing a DOM element's content or style with a ref, you are fighting React's rendering model. This can lead to your changes being overwritten on the next render. A ref change does not trigger a re-render, so never use it to store information that the UI needs to display.
One canonical example
To create a button that focuses an input field, you first declare const inputRef = useRef(null). Then, you attach it to the input: <input ref={inputRef} />. Finally, create a click handler for the button: function handleClick() { inputRef.current.focus(); }. When the button is clicked, this function directly accesses the input DOM node via inputRef.current and calls the standard browser focus() method on it.
Interview question
Which scenario most appropriately utilizes a React Ref?
- a.Programmatically focusing an input field after a user clicks a button.Correct
- b.Updating the text content of a paragraph element based on user input.
- c.Storing a value that, when changed, should trigger a component re-render.
- d.Managing the visibility of a UI element by toggling a CSS display property.
Why? this is the answer
Refs are an escape hatch for imperative DOM actions like programmatically focusing an input, which do not have a declarative equivalent in React. Options A and B describe declarative UI updates best handled with state, while option C is incorrect because refs do not trigger component re-renders.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles