In-depth questions on useRef

ReactJunior~2 min read

1. What does `useRef()` return

The useRef() hook returns a reference object with a single property, .current.

javascript

const myRef = useRef(initialValue);

The returned value:

javascript

{ current: initialValue }

current is the current value of the reference (it can be changed).
This object is the same one across all of the component's renders.

Example:

javascript

const ref = useRef(10);
console.log(ref.current); // 10
ref.current = 25;
console.log(ref.current); // 25

React does not lose this value across re-renders - the ref lives through the component's whole lifecycle.

2. When is `useRef()` useful

Main use cases:

Scenario	Example
Access to a DOM element	`inputRef.current.focus()`
Storing a timer or an id	`setInterval`, `requestAnimationFrame`
Keeping the previous value	`prevValue.current = value`
Storing "mutable" data without a re-render	a counter, cache, local buffer
Avoiding "stale closures" in effects	keeping an up-to-date reference to a variable

Example - focusing an input:

javascript

import { useRef, useEffect } from "react";

function InputFocus() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus(); // access to the DOM element
  }, []);

  return <input ref={inputRef} placeholder="Focus on me" />;
}

3. How does `useRef()` differ from `useState()`

Characteristic	`useState()`	`useRef()`
Stores data across renders	Yes	Yes
Triggers a re-render on change	Yes	No
Stores a DOM reference	No	Yes
Suits UI state	Yes	No
Suits "internal" mutable data	Sometimes	Excellent

Example of the difference:

javascript

function Example() {
  const [count, setCount] = useState(0);
  const refCount = useRef(0);

  const handleClick = () => {
    setCount(count + 1);     // triggers a render
    refCount.current += 1;   // does not trigger a render
    console.log("refCount =", refCount.current);
  };

  console.log("Component re-rendered");

  return <button onClick={handleClick}>Count: {count}</button>;
}

On each click:

setCount() -> updates the UI (re-render)
refCount.current++ -> just changes the value in memory, no re-render

4. Can `.current` be changed without a re-render?

Yes, that is exactly what useRef was created for.

javascript

ref.current = newValue; // can be changed directly

React does not track changes to .current, so changing it does not trigger a re-render of the component.

This behavior makes useRef ideal for:

counters, timers, caches, buffers;
flags like isMounted;
storing any mutable value that does not affect the UI.

Summary

Question	Short answer
What does `useRef()` return	The object `{ current: initialValue }`
When is it useful	For DOM access, storing mutable data, previous values, timers
How does it differ from `useState()`	`useState` triggers a re-render on change, `useRef` does not
Can `.current` be changed without a render	Yes, `.current` can be changed directly, React will not re-render the component

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.