useRef Hook — Complete React Interview Guide

What useRef returns and how it works

useRef(initialValue) returns a plain object: { current: initialValue }. This object is created once when the component mounts and the same object is returned on every subsequent render. Mutating .current does not trigger a re-render — React never reads ref.current during its render cycle.

const ref = useRef(0)
// ref is: { current: 0 }
 
ref.current = 42   // mutation — React does NOT know, does NOT re-render
ref.current        // 42 — on the next render, still 42

Use case 1 — DOM access

Pass a ref to a JSX element's ref attribute. React sets ref.current to the DOM node when the element mounts, and sets it back to null when it unmounts.

function TextInput() {
  const inputRef = useRef(null)
 
  function focusInput() {
    inputRef.current.focus()          // direct DOM access
    inputRef.current.select()         // select all text
    inputRef.current.scrollIntoView() // scroll to element
  }
 
  return (
    <>
      <input ref={inputRef} type="text" placeholder="Type here..." />
      <button onClick={focusInput}>Focus</button>
    </>
  )
}

Important: ref.current is null during render. The DOM node is only available after mount, so only access it inside useEffect, event handlers, or useLayoutEffect — never in the render body.

function Component() {
  const ref = useRef(null)
 
  // ✗ Wrong — ref.current is null during render
  console.log(ref.current.offsetWidth)
 
  // ✓ Correct — DOM is available after mount
  useEffect(() => {
    console.log(ref.current.offsetWidth)  // works ✓
  }, [])
 
  return <div ref={ref}>Hello</div>
}

Use case 2 — Mutable instance variables (no re-render)

Store any value that needs to persist across renders but shouldn't trigger a re-render when it changes:

// Timer ID — changing it shouldn't re-render the component
function Timer() {
  const [count, setCount]   = useState(0)
  const intervalRef         = useRef(null)
 
  function start() {
    if (intervalRef.current) return  // already running
    intervalRef.current = setInterval(() => setCount(c => c + 1), 1000)
  }
 
  function stop() {
    clearInterval(intervalRef.current)
    intervalRef.current = null
  }
 
  return (
    <div>
      <p>{count}</p>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
    </div>
  )
}

Breaking stale closures with useRef

One of the most powerful patterns: store the latest version of a value or callback in a ref so that closures always read the current value, even without listing it as a dependency.

// Problem: stale closure in setInterval
function Counter() {
  const [count, setCount] = useState(0)
 
  useEffect(() => {
    const id = setInterval(() => {
      console.log(count)      // stale — always 0
    }, 1000)
    return () => clearInterval(id)
  }, [])
 
  // Fix: store latest count in ref
  const countRef = useRef(count)
  useEffect(() => { countRef.current = count }, [count])
 
  useEffect(() => {
    const id = setInterval(() => {
      console.log(countRef.current)  // always current ✓
    }, 1000)
    return () => clearInterval(id)
  }, [])  // safe — countRef is stable
}

Always-current callback pattern:

// Stable function that always calls the latest version of a callback
function useLatestCallback(fn) {
  const fnRef = useRef(fn)
  useEffect(() => { fnRef.current = fn })  // update after every render
  return useCallback((...args) => fnRef.current(...args), [])
}

Tracking previous values with useRef

function usePrevious(value) {
  const ref = useRef(undefined)
  useEffect(() => { ref.current = value })  // runs AFTER render
  return ref.current  // during current render = previous render's value
}
 
function Counter() {
  const [count, setCount] = useState(0)
  const prevCount = usePrevious(count)
 
  return <p>Now: {count} | Before: {prevCount}</p>
}

forwardRef — passing refs to child components

By default, you cannot attach a ref to a custom functional component. React.forwardRef lets a parent pass a ref through to a DOM element inside the child.

// Without forwardRef — ref.current is null
function Input(props) { return <input {...props} /> }
<Input ref={ref} />  // ref.current = null!
 
// With forwardRef — ref reaches the input
const Input = React.forwardRef(function Input(props, ref) {
  return <input ref={ref} {...props} />
})
 
function Form() {
  const ref = useRef(null)
  return (
    <>
      <Input ref={ref} placeholder="Name" />
      <button onClick={() => ref.current.focus()}>Focus</button>
    </>
  )
}

useImperativeHandle — controlling the exposed API

const Input = React.forwardRef((props, ref) => {
  const innerRef = useRef(null)
 
  useImperativeHandle(ref, () => ({
    focus: () => innerRef.current.focus(),
    clear: () => { innerRef.current.value = '' },
    getValue: () => innerRef.current.value,
    // Parent can ONLY call these — cannot access the raw DOM node
  }))
 
  return <input ref={innerRef} {...props} />
})

Callback refs — for conditional or dynamic elements

Instead of a ref object, pass a function. React calls it with the DOM node on mount and null on unmount.

function MeasuredDiv() {
  const [height, setHeight] = useState(0)
 
  const callbackRef = useCallback(node => {
    if (node !== null) setHeight(node.offsetHeight)
  }, [])
 
  return <div ref={callbackRef}>Content — height: {height}px</div>
}
 
// Conditional render — object ref misses the attach moment
// Callback ref fires immediately when element appears
function ConditionalMap({ show }) {
  const mapRef = useCallback(node => {
    if (node) initMapLibrary(node)
  }, [])
  return show ? <div ref={mapRef} id="map" /> : null
}

useRef vs useState — when to choose which