Why doesn't updating a ref re-render?

By design — refs are for imperative values the UI doesn't depend on, so React doesn't schedule a render when they change.

Can I store a DOM node in state?

Use a ref for DOM nodes. State is for data that drives rendering.

useRef vs useState in React

Both hold values across renders, but only one triggers a re-render. Choosing correctly avoids a whole class of bugs.

The key difference

Updating state (useState) triggers a re-render. Writing to a ref (useRef) does NOT — it's a mutable { current } box that persists across renders silently.

const [count, setCount] = useState(0); // re-renders
const renders = useRef(0); renders.current++; // no re-render

When to use each

Use state for anything that affects what's rendered. Use a ref for values the render output ignores — a DOM node, a timer id, a previous value. Never read/write a ref during render to drive output.

Master every React hook

useState, useRef, useMemo, useCallback and custom hooks — with interview context in the React Interview Kit.

⚡ Get the React Interview Kit → ₹399

Frequently asked questions

Why doesn't updating a ref re-render?: By design — refs are for imperative values the UI doesn't depend on, so React doesn't schedule a render when they change.
Can I store a DOM node in state?: Use a ref for DOM nodes. State is for data that drives rendering.

PrevioususeMemo vs useCallback — When to Use Each Next useState vs useReducer — Which to Use

Full kit

React Interview Kit · ₹399

Get it →