React useRef vs useState — When to Use Which

React gives us useState and useRef to store values across renders. But they behave differently.

1. useState

• Stores data that affects rendering.
• When state changes → component re-renders.
• Best for values you want to show in the UI.

function Counter() { const [count, setCount] = useState(0) // 🔄 triggers re-render return ( <button onClick={() => setCount(count + 1)}> Count: {count} </button> ) } 

Every click updates count → React re-renders → UI shows new value.

2. useRef

• Stores a mutable value that survives re-renders.
• Updating .current does NOT trigger re-render.
• Best for storing DOM nodes or values that don’t affect UI.

function Timer() { const intervalRef = useRef<number | null>(null) // 🗃️ stable across renders function start() { intervalRef.current = window.setInterval(() => { console.log("tick") }, 1000) } function stop() { if (intervalRef.current) clearInterval(intervalRef.current) } return ( <> <button onClick={start}>Start</button> <button onClick={stop}>Stop</button> </> ) } 

Here, intervalRef keeps the timer ID but doesn’t cause re-renders.

3. When to Use Which?

✅ Use useState when…

• The value affects rendering.
• UI should update when value changes.
• Examples: counters, form fields, theme toggles, fetched data.

✅ Use useRef when…

• The value should persist across renders but doesn’t affect UI.
• You want to avoid unnecessary re-renders.
• Examples:
  • Accessing DOM elements (ref={myRef})
  • Storing timer IDs, WebSocket connections
  • Holding previous values for comparison

4. Example: Using Both Together

function InputFocus() { const [text, setText] = useState("") // shows in UI const inputRef = useRef<HTMLInputElement>(null) // reference to DOM return ( <> <input ref={inputRef} value={text} onChange={e => setText(e.target.value)} /> <button onClick={() => inputRef.current?.focus()}> Focus input </button> </> ) } 

• useState stores the text (triggers render).
• useRef stores a DOM reference (no render needed).

5. Quick Mental Model 🧠

• useState = for UI → change → re-render.
• useRef = for storage → change → no re-render.

6. Cheatsheet Table

⚡ That’s it! Now you know when to reach for useState and when to grab useRef — and have a cheatsheet for quick reference.

Originally published on: Bitlyst