Memoization in React

React is fast. By default, it is designed so that you don’t have to worry about performance in 90% of cases.

However, when applications grow, we start to notice some “lag” when typing in an input or opening a menu. Generally, this is due to one of the most common problems in React: unnecessary renders.

One of the mechanisms to improve this is Memoization, a technique that allows “remembering” previous results so they don’t have to be recalculated.

The Problem of Cascading Renders

To understand the solution, you first need to understand the problem. In React, when a parent component renders (because its state changed), all its children render recursively as well, whether their props changed or not.

Imagine this:

This is crazy inefficient. This is where our three optimization tools come in.

Protecting Components with React.memo

React.memo is a Higher-Order Component (HOC) that wraps your component. Its function is to check the props:

The syntax is as follows:

import { memo, useState } from 'react';

// Child Component (Heavy)
// By wrapping it in memo, we protect it.
const HijoPesado = memo(function Hijo({ texto }) {
  console.log("Renderizando Hijo..."); // Will only appear if 'texto' changes
  return <p>{texto}</p>;
});

export default function Padre() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      
      {/* Even though Parent changes, 'texto' is still "Hola", 
          so HijoPesado will NOT render again. */}
      <HijoPesado texto="Hola" />
    </div>
  );
}

import { useMemo, useState } from 'react';

function ListaFiltrada({ usuarios, busqueda }) {
  // ❌ BAD: This runs on EVERY render, slowing down the app
  // const filtrados = usuarios.filter(u => u.name.includes(busqueda));

  // ✅ GOOD: We only filter if 'usuarios' or 'busqueda' changes
  const filtrados = useMemo(() => {
    console.log("Filtrando lista gigante...");
    return usuarios.filter(u => u.name.includes(busqueda));
  }, [usuarios, busqueda]);

  return (
    <ul>
      {filtrados.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

Stabilizing Functions with useCallback

This is the most difficult Hook to understand, because it has to do with Referential Identity in JavaScript.

Every time a component renders, all the functions inside it are created again. They are new functions at new memory addresses.

Let’s see the problem. Let’s go back to React.memo. We said it only prevents rendering if the props don’t change.

function Padre() {
  const [count, setCount] = useState(0);

  // This function IS CREATED ANEW on every click
  const handleClick = () => console.log('Click');

  return (
    // ¡React.memo will NOT work!
    <HijoMemoizado onClick={handleClick} />
  );
}

To avoid this, useCallback freezes the function. It returns exactly the same function instance between renders, unless its dependencies change.

import { useCallback } from 'react';

function Padre() {
  const [count, setCount] = useState(0);

  // ✅ Now 'handleClick' is stable. It's always the same reference in memory.
  const handleClick = useCallback(() => {
    console.log('Click');
  }, []); // Empty dependencies = never changes

  return (
    // 😄 Now yes: HijoMemoizado receives the same prop and does NOT render.
    <HijoMemoizado onClick={handleClick} />
  );
}

The Cost of Memoization (a.k.a. don’t use it for everything)

If these tools are so good, why not wrap everything in memo and useCallback? Because memoization is not free.

If the component is simple (e.g., a <Button>Text</Button>), it costs more work to compare the props than to render the button again.