Frontend Engineering | VoidX Academy

37. Refs (useRef)

Escaping the Render Cycle

In React, we typically use useState to store data. However, updating state always triggers a component re-render. What if you need to store a value and update it, but you do not want to trigger a re-render? Or what if you need to bypass React entirely and physically touch an HTML DOM element? This is exactly what useRef is for.

Storing Mutable Values

The useRef hook returns a mutable object with a single property: .current. You can change this value freely without causing a render. It is perfect for storing background data like timer IDs or previous state values.

import { useState, useRef } from 'react';

export default function Timer() {
  const [seconds, setSeconds] = useState(0);
  // We store the interval ID in a ref so we can clear it later without triggering renders
  const timerId = useRef(null);

  const start = () => {
    // Mutating .current does NOT cause a re-render
    timerId.current = setInterval(() => setSeconds(s => s + 1), 1000);
  };

  const stop = () => {
    clearInterval(timerId.current);
  };

  return (
    <div>
      <p>{seconds}s</p>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
    </div>
  );
}

Accessing DOM Elements Directly

React generally discourages direct DOM manipulation (like using document.getElementById). But sometimes it is unavoidable, such as when you need to manually focus an input field, measure an element's physical width, or integrate with a non-React library (like a 3D canvas). You attach a ref to an element using the special ref prop.

import { useRef } from 'react';

export default function FocusInput() {
  // 1. Create the ref
  const inputRef = useRef(null);

  const handleFocus = () => {
    // 3. Access the actual physical DOM node using .current
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      {/* 2. Attach the ref to the element */}
      <input ref={inputRef} type="text" placeholder="Type here..." />
      <button onClick={handleFocus}>Focus the input</button>
    </div>
  );
}

Forwarding Refs

If you build a custom component (like <CustomInput />) and a parent component tries to pass a ref to it, React will throw an error. By default, custom components don't expose their internal DOM nodes. You must wrap your custom component in forwardRef to allow the ref to pass through.

import { forwardRef } from 'react';

// We wrap the component in forwardRef, which gives us access to a second parameter: 'ref'
const CustomInput = forwardRef((props, ref) => {
  return (
    <div className="fancy-input-wrapper">
      {/* We pass the forwarded ref down to the actual HTML input */}
      <input ref={ref} className="fancy-input" {...props} />
    </div>
  );
});

export default CustomInput;

Knowledge Check

Ready to test your understanding of 37. Refs (useRef)?

36. Error Boundaries

38. Portals