useRef

Reviewed & published by Brayan K

useRef gives you a mutable box — an object { current: value } — that persists across renders but does not trigger a re-render when you change it. It has two everyday jobs: holding a reference to a DOM element (to focus an input or measure a node), and remembering a value (like a timer id or a previous value) without affecting the UI.

Part of the free React course at LearnCodingFast — hands-on lessons with worked examples and the output they print, plus practice exercises and a quick quiz.

What You'll Learn

• What a ref is: a { current } box that persists
• Why changing a ref does NOT re-render
• useRef vs useState — when to use each
• Attach a ref to a DOM node and focus it
• Persist values like timer ids and previous props
• Why a ref is null during the first render

1️⃣ A Ref Is a Persistent Box

useRef(initial) returns an object { current: initial }. The same object survives every render, and you read or write .current directly — no setter. Crucially, writing to it does not schedule a re-render.

function Stopwatch() {
  const intervalRef = useRef(null);   // { current: null }
  function start() {
    intervalRef.current = setInterval(tick, 1000);   // store the timer id
  }
  function stop() {
    clearInterval(intervalRef.current);   // read it back later
  }
  // ...
}

// A ref is just a plain object: { current: value }.
// Changing .current does NOT cause a re-render — it just persists.

const ref = { current: 0 };   // useRef(0) gives you this object

ref.current = ref.current + 1;
ref.current = ref.current + 1;
ref.current = ref.current + 1;

console.log(ref.current);   // 3
// In React the screen would NOT update on these changes —
// the value is remembered, but nothing re-renders.

2️⃣ Ref vs State

Both useRef and useState remember a value between renders. The difference is the re-render: updating state tells React to re-render; updating a ref does not. Rule of thumb: if a value should appear on screen, use state; if it's bookkeeping the UI doesn't display, use a ref.

// Shows on screen  -> state
const [count, setCount] = useState(0);

// Behind the scenes -> ref (no re-render)
const clicksWithoutRender = useRef(0);
clicksWithoutRender.current++;   // remembered, but UI doesn't change

// REF vs STATE — both persist; only state re-renders.
let renders = 0;
function render() { renders++; }

// Updating a ref: no render
const countRef = { current: 0 };
countRef.current++;        // no render
countRef.current++;        // no render
console.log("renders after ref updates:", renders);   // 0

// Updating state: each commit re-renders
function setState() { render(); }
setState();                // render
setState();                // render
console.log("renders after state updates:", renders); // 2

Your turn — build a render counter using a ref's .current:

// 🎯 YOUR TURN — fill in each ___ then press "Try it Yourself".
// A ref is { current: ... }. Build a "render counter" that counts
// how many times a function runs WITHOUT triggering re-renders.

const renderCount = { current: 0 };

function trackRender() {
  // 1) Increase the ref's stored number by 1.
  renderCount.___ = renderCount.___ + 1;   // 👉 use .current twice
  return renderCount.current;
}

console.log(trackRender());   // 1
console.log(trackRender());   // 2
console.log(trackRender());   // 3

// ✅ Expected output:
//    1
//    2
//    3

3️⃣ DOM Refs & Persisting Values

Attach a ref to an element with the ref attribute. After the element mounts, React sets .current to the real DOM node — so you can focus it, scroll it, or measure it. Note it's null during the first render, so read it in an effect or an event handler. Refs are also perfect for remembering a previous value across renders.

function SearchBox() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus();   // focus the input after it mounts
  }, []);
  return <input ref={inputRef} placeholder="Search..." />;
}

// A classic ref use: remember the PREVIOUS value across renders.
// We simulate three renders where the count changes each time.

const prevRef = { current: undefined };
const history = [];

function onRender(count) {
  history.push("now=" + count + " prev=" + prevRef.current);
  prevRef.current = count;   // store for next render (would be in an effect)
}

onRender(0);   // now=0 prev=undefined
onRender(5);   // now=5 prev=0
onRender(8);   // now=8 prev=5

history.forEach(line => console.log(line));

🧩 Reorder Challenge

These lines focus an input on mount using a ref. Put them in the right order:

A.   useEffect(() => {
B.   const inputRef = useRef(null);
C.   inputRef.current.focus();
D.   }, []);
E.   return <input ref={inputRef} />;

Common Errors (and the fix)

• "Cannot read properties of null (reading 'focus')." — You read .current during render. Read it in an effect or handler, after mount.
• UI doesn't update when I change a ref. — Correct: refs don't re-render. If it must show on screen, use state.
• Using a ref to store data that drives the UI. — That's a state job. Refs are for non-visual bookkeeping or DOM nodes.
• Forgot to attach the ref. — Add ref={inputRef} to the element, or .current stays null.

📋 Quick Reference

🧠 Quick Recall

1. You do ref.current++ three times. How many re-renders?

Zero. Changing a ref never triggers a re-render.

2. Why is inputRef.current null on the first render?

The DOM node doesn't exist until after the component mounts. React fills in .current afterward — read it in an effect.

3. A value must appear on screen and update. Ref or state?

State — only state re-renders the UI when it changes.

Mini-Challenge: Click Gap Tracker

Use a ref to remember the time of the last click and report the gap between clicks. Run it and check your output.

// 🎯 MINI-CHALLENGE: a click timestamp tracker
//
// A ref can hold the time of the LAST click without re-rendering.
// 1. Start lastClick = { current: null }.
// 2. For each time in clicks, log "gap: " + (time - lastClick.current)
//    — but on the FIRST click (current is null) log "first click".
// 3. After logging, store the time in lastClick.current.
//
// ✅ Expected output:
//    first click
//    gap: 5
//    gap: 3

const clicks = [10, 15, 18];
const lastClick = { current: null };

// your code here

🎉 Lesson Complete

• ✅ A ref is a { current } box that persists across renders
• ✅ Changing .current does not re-render
• ✅ Use state for visible data, refs for bookkeeping & DOM nodes
• ✅ Attach with ref={...}; read it in an effect (it's null during render)

Practice quiz

Continue this course

• Previous: Checkpoint: React Fundamentals
• Next: useContext & the Context API — Share global state and avoid prop-drilling with the Context API
• Quick reference: React cheat sheet › Effects & Data

Frequently asked questions

What's the difference between useRef and useState?

Both persist a value across renders, but changing a ref's .current does NOT trigger a re-render, while setState does. Use state for data that should update the UI; use a ref for values you want to remember without re-rendering, or to reference a DOM node.

How do I get a DOM element with useRef?

Create a ref with const inputRef = useRef(null), attach it with <input ref={inputRef} />, and after the element mounts React sets inputRef.current to the DOM node. Then you can call inputRef.current.focus().

Why is my ref null?

The DOM node only exists after the component mounts, so inputRef.current is null during the first render. Read it inside an effect or an event handler, not during render.

Can I read a ref to compute what I render?

No — changing a ref doesn't re-render, so the UI won't reflect it. If a value should appear on screen, it belongs in state, not a ref.

Related lessons

• useState in Depth
• useEffect