React useRef Hook

useRef creates a plain JavaScript object with a single .current property. React keeps the same object across every render — mutating .current never schedules a re-render.

• Attach a ref to a DOM element to call browser methods on it.

  import { useRef } from 'react';
  
  function TextInput() {
    const inputRef = useRef(null);
  
    function handleClick() {
      inputRef.current.focus(); // direct DOM call
    }
  
    return (
      <>
        <input ref={inputRef} placeholder="Type here" />
        <button onClick={handleClick}>Focus input</button>
      </>
    );
  }

• Store any mutable value — not just DOM nodes. Here a render counter persists without triggering re-renders.

  function RenderCounter() {
    const renders = useRef(0);
    renders.current += 1; // mutate during render is fine for refs
  
    return <p>Rendered {renders.current} times (no re-render loop)</p>;
  }

• Key distinction: ref vs state.
  • ref.current changes — component does not re-render, UI stays the same.
  • setState changes — component re-renders, UI updates.

Instead of passing a ref object to the ref prop, you can pass a function. React calls it with the DOM node on mount and null on unmount. This is useful when you need to act on the node the instant it appears — before any effect would fire.

• Measure an element's size the moment it mounts:

  function MeasuredBox() {
    const [height, setHeight] = useState(null);
  
    const measuredRef = useCallback((node) => {
      if (node !== null) {
        setHeight(node.getBoundingClientRect().height);
      }
    }, []); // stable function — no deps needed
  
    return (
      <>
        <div ref={measuredRef} style={{ padding: 20 }}>
          Resize me
        </div>
        {height !== null && <p>Height: {height}px</p>}
      </>
    );
  }

• The callback fires again when the element re-mounts (e.g. after conditional rendering), giving you an automatic measurement update — a regular ref object would not trigger this.
• Wrap the callback in useCallback with a stable dependency array to avoid React re-running the ref function on every render.
• Clean-up pattern — run code on both attach and detach:

  const logRef = useCallback((node) => {
    if (node) {
      console.log('mounted:', node.tagName);
    } else {
      console.log('unmounted');
    }
  }, []);
  
  return <div ref={logRef}>Watch the console</div>;

• Prefer state over refs for UI values. If a value change should update the screen, use useState — not a ref.

  // Wrong: ref won't update the UI
  const count = useRef(0);
  const increment = () => { count.current++; }; // no re-render
  
  // Right: state drives the UI
  const [count, setCount] = useState(0);
  const increment = () => setCount(c => c + 1);

• Never read refs during rendering. The DOM node is null until after mount. Reading it during render returns null at best and throws at worst.

  // Wrong: ref is null here
  function Bad() {
    const ref = useRef(null);
    const width = ref.current?.offsetWidth; // always undefined on first render
    return <div ref={ref}>{width}px</div>;
  }
  
  // Right: read in effect or event handler
  function Good() {
    const ref = useRef(null);
    const [width, setWidth] = useState(0);
    useEffect(() => { setWidth(ref.current.offsetWidth); }, []);
    return <div ref={ref}>{width}px</div>;
  }

• React 19: drop forwardRef in new components. Accept ref as a plain prop — it's simpler and the JSX tools generate better TypeScript types automatically.
• Use callback refs for dynamic elements. When an element may mount and unmount (e.g. behind a conditional), a callback ref ensures you always run your setup code at the right time.
• Don't store derived data in refs. Compute it during render instead — refs that shadow state become stale and are hard to debug.

  // Wrong: keeping a ref in sync with state manually
  const doubleRef = useRef(count * 2);
  
  // Right: derive during render
  const double = count * 2;