`useRef` lets a [React](/courses/reactjs) component keep a value between renders without causing a new render when that value changes. ### Basic Syntax ```jsx const ref = useRef(initialValue); ``` It returns an object containing a `current` property: ```jsx { current: initialValue } ``` You can update it directly: ```jsx ref.current = newValue; ``` ### Example: Storing a Timer ID ```jsx import { useRef } from "react"; function Timer() { const timerRef = useRef(null); function startTimer() { timerRef.current = setInterval(() => { console.log("Running"); }, 1000); } function stopTimer() { clearInterval(timerRef.current); } return ( <> ); } ``` The timer ID must survive between renders, but changing it does not need to update the screen. That makes a ref appropriate. ### DOM References One of the most common uses of `useRef` is accessing a DOM [node](/courses/nodejs). ```jsx function SearchBox() { const inputRef = useRef(null); function focusInput() { inputRef.current.focus(); } return ( <> ); } ``` [React](/courses/reactjs) places the DOM element into: ```text inputRef.current ``` ### useRef vs useState The key difference is rendering. ```text useState → value survives renders → updating it causes React to render again → use when value affects UI useRef → value survives renders → changing ref.current does not render again → use when value does not directly affect UI ``` For example, a visible counter should usually be state: ```jsx const [count, setCount] = useState(0); ``` A timeout ID can be a ref: ```jsx const timeoutRef = useRef(null); ``` ### Do Not Store Visible UI State in Refs This is a poor use: ```jsx const countRef = useRef(0); countRef.current++; ``` if you expect the displayed count to update. React does not render merely because `current` changed. ### Interview-Ready Answer `useRef` stores a mutable value that persists between renders without triggering a new render when `ref.current` changes. It is commonly used for DOM references, timer IDs, and other values that do not determine UI. `useState`, by contrast, should be used when changing a value needs to update what the user sees.