React useRef & useMemo Hooks: Beginner’s Guide with Examples

React Hooks like useRef and useMemo are essential for advanced functional component behavior.

useRef → Access DOM elements directly and persist values across renders without causing re-renders.
useMemo → Optimize performance by memoizing expensive computations and preventing unnecessary recalculations.

Both are useful for efficient and interactive React apps.

useRef Hook

useRef allows you to:

Store a mutable value that does not trigger re-render
Access DOM elements directly

Syntax

refContainer.current stores the value or DOM reference.

Example 1: Accessing DOM Element

import { useRef } from "react";

function InputFocus() {
  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>
  );
}

Clicking the button focuses the input without re-rendering the component.

Example 2: Persisting Values Across Renders

import { useRef, useState } from "react";

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

  renderCount.current += 1;

  return (
    <div>
      <p>Count: {count}</p>
      <p>Component rendered: {renderCount.current} times</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

renderCount.current persists across renders without triggering re-render.

useMemo Hook

useMemo is used to memoize expensive calculations to avoid recalculating on every render.

Syntax

First argument → function that returns the value
Second argument → dependency array, runs computation only when dependencies change

Example 1: Expensive Calculation

import { useState, useMemo } from "react";

function ExpensiveComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const expensiveCalculation = (num) => {
    console.log("Calculating...");
    for (let i = 0; i < 1000000000; i++) {} // heavy computation
    return num * 2;
  };

  const double = useMemo(() => expensiveCalculation(count), [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Double: {double}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type here..."
      />
    </div>
  );
}

Without useMemo, typing in the input would re-run the expensive calculation unnecessarily.

Key Differences: useRef vs useMemo

Feature	useRef	useMemo
Purpose	Store mutable value or DOM reference	Memoize computed value for performance
Triggers re-render?	No	No
Common Use Case	Access DOM, persist value across renders	Expensive calculations, derived data
Syntax	`const ref = useRef(initialValue)`	`const memoValue = useMemo(() => compute(), [deps])`