React's useRef Hook: Your Ultimate Cheat Sheet

The useRef hook is one of React's most versatile and underrated tools. It allows you to manage mutable references, interact with the DOM, and even store state without triggering re-renders. Let’s dive into 6 practical use cases to master useRef like a pro!

1. Accessing DOM Elements

The most common use case for useRef is to directly manipulate DOM elements.

import React, { useRef } from "react";

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

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Type here..." />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}
        

Why use this?

• Set focus on inputs programmatically.
• Work with canvas, videos, or other interactive DOM elements.

2. Storing Mutable Values Without Re-renders

Use useRef to keep values that don’t need to trigger re-renders.

import React, { useRef } from "react";

function ClickCounter() {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1;
    console.log(`Clicked ${countRef.current} times`);
  };

  return <button onClick={handleClick}>Click Me</button>;
}        

Why use this?

• Avoid re-renders when updating counters, IDs, or other mutable values.

3. Saving Previous State or Value

Track the previous value of a state variable between renders.

import React, { useState, useEffect, useRef } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  });

  const prevCount = prevCountRef.current;

  return (
    <div>
      <h1>Current Count: {count}</h1>
      <h2>Previous Count: {prevCount !== undefined ? prevCount : "None"}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}        

Why use this?

• Monitor changes over time without triggering re-renders.
• Debug state transitions easily.

4. Managing Component Lifecycle

Prevent stale closures in timers, intervals, or event listeners.

import React, { useRef, useEffect, useState } from "react";

function Timer() {
  const [time, setTime] = useState(0);
  const timerRef = useRef(null);

  const startTimer = () => {
    if (!timerRef.current) {
      timerRef.current = setInterval(() => {
        setTime((prev) => prev + 1);
      }, 1000);
    }
  };

  const stopTimer = () => {
    clearInterval(timerRef.current);
    timerRef.current = null;
  };

  useEffect(() => {
    return () => stopTimer(); // Cleanup on unmount
  }, []);

  return (
    <div>
      <h1>Time: {time}s</h1>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
}        

Why use this?

• Avoid stale closures when using timers or intervals.
• Safely manage cleanup on unmount.

5. Controlling Animations or Third-Party Libraries

Leverage useRef to interact with external libraries or custom animations.

import React, { useRef, useEffect } from "react";

function CanvasComponent() {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");

    context.fillStyle = "blue";
    context.fillRect(10, 10, 150, 100);
  }, []);

  return <canvas ref={canvasRef} width={200} height={150}></canvas>;
}        

Why use this?

• Integrate libraries like D3.js, Chart.js, or Three.js.
• Create complex animations or graphics.

6. Stabilizing Function References

Prevent child components from re-rendering unnecessarily by keeping a stable reference to a function.

import React, { useRef, useCallback } from "react";

function Parent() {
  const callbackRef = useRef();

  const stableCallback = useCallback(() => {
    console.log("Callback executed");
  }, []);

  callbackRef.current = stableCallback;

  return <Child callback={callbackRef.current} />;
}

function Child({ callback }) {
  return <button onClick={callback}>Run Callback</button>;
}        

Why use this?

• Optimize performance by avoiding unnecessary renders.
• Pass stable function references to children or event handlers.

Best Practices with useRef

1. Avoid Overusing useRef: Use it only when necessary.
2. Combine with useEffect: Use lifecycle hooks to synchronize refs.
3. Don’t Use useRef for State: If a value affects rendering, use useState.
4. Clean Up Properly: Always clear intervals, event listeners, or mutable references.

Mastering useRef opens up a world of possibilities in React development. From DOM manipulations to optimizing performance, it's a powerful tool that every developer should know.

?? What’s your favorite useRef use case? Share it in the comments!