Hook useCallback en React: cuándo ayuda de verdad

useCallback guarda en caché una función entre renderizados: devuelve el mismo objeto de función hasta que cambia una de sus dependencias. Eso solo importa cuando algo compara la función por referencia, que en la práctica significa un hijo envuelto en memo o un efecto que incluye la función como dependencia.

import { memo, useCallback, useState } from 'react';

const SaveButton = memo(function SaveButton({ label, onSave }) {
    console.log('render', label);
    return <button onClick={onSave}>{label}</button>;
});

export default function App() {
    const [dark, setDark] = useState(false);
    const [saved, setSaved] = useState(0);

    const saveInline = () => setSaved((n) => n + 1);
    const saveCached = useCallback(() => setSaved((n) => n + 1), []);

    return (
        <div style={{ background: dark ? '#222' : '#fff', color: dark ? '#eee' : '#222', padding: 12 }}>
            <button onClick={() => setDark(!dark)}>Toggle theme</button>
            <SaveButton label="Inline function" onSave={saveInline} />
            <SaveButton label="useCallback" onSave={saveCached} />
            <p>Saved {saved} times</p>
        </div>
    );
}

Ambos botones están memoizados y ambos hacen lo mismo. Cambia el tema y mira la consola: solo aparece render Inline function, porque saveInline es una función nueva en cada renderizado, así que memo ve una prop cambiada. saveCached es la misma función cada vez, así que ese botón se salta.

Lo que guarda en caché

const cachedFn = useCallback(fn, dependencies);

• fn es la función que quieres conservar. React no la llama; te la devuelve.
• dependencies enumera cada valor del componente que lee fn. En cada renderizado React los compara con los anteriores usando Object.is.
• Si nada cambió, recibes la función del renderizado anterior. Si algo cambió, recibes la función que pasaste esta vez, y React la conserva para la próxima.

Fíjate en lo que esto significa: la función flecha dentro de useCallback se sigue creando en cada renderizado, porque es solo un argumento. useCallback no ahorra ese trabajo. Su único trabajo es devolverte una función anterior idéntica para que la referencia se mantenga igual.

useCallback vs useMemo

Son el mismo mecanismo. useMemo guarda en caché el resultado de llamar a una función, useCallback guarda en caché la función en sí:

// These two lines are equivalent
const handleSave = useCallback(() => save(draft), [draft]);
const handleSave = useMemo(() => () => save(draft), [draft]);

Usa useCallback para funciones porque se lee mejor, y useMemo para valores calculados como una lista filtrada o un objeto de opciones.

Quitar dependencias con funciones de actualización

Una función en caché debe incluir cada valor de estado que lee, y cada vez que ese estado cambia, la función también cambia. En una lista de filas memoizadas eso es un problema: una función remove que lee todos cambia cada vez que cambia todos, así que cada fila restante vuelve a renderizar después de cada eliminación. Usa la forma de actualización del setter para que la función ya no lea todos en absoluto.

import { memo, useCallback, useState } from 'react';

const Row = memo(function Row({ todo, onRemove }) {
    console.log('render row', todo.text);
    return (
        <li>
            {todo.text} <button onClick={() => onRemove(todo.id)}>Remove</button>
        </li>
    );
});

export default function App() {
    const [todos, setTodos] = useState([
        { id: 1, text: 'Write tests' },
        { id: 2, text: 'Fix the bug' },
        { id: 3, text: 'Ship it' },
    ]);
    const [draft, setDraft] = useState('');

    const remove = useCallback((id) => {
        setTodos((list) => list.filter((t) => t.id !== id));
    }, []);

    return (
        <div>
            <input
                value={draft}
                onChange={(e) => setDraft(e.target.value)}
                placeholder="Typing here renders no rows"
            />
            <ul>
                {todos.map((t) => (
                    <Row key={t.id} todo={t} onRemove={remove} />
                ))}
            </ul>
        </div>
    );
}

Quita una fila: la consola se queda en silencio, porque las demás filas recibieron el mismo objeto todo y la misma función remove que antes. Cambia la función a useCallback((id) => setTodos(todos.filter((t) => t.id !== id)), [todos]) y vuelve a probar: ahora cada fila restante registra un renderizado después de cada eliminación.

Funciones como dependencias de efectos

Un efecto que llama a una función declarada en el componente tiene que incluir esa función como dependencia. Si la función es nueva en cada renderizado, el efecto se ejecuta después de cada renderizado. useCallback la mantiene estable hasta que cambian sus propias entradas:

import { useCallback, useEffect, useState } from 'react';

function ChatRoom({ roomId }) {
    const [message, setMessage] = useState('');

    const createOptions = useCallback(() => {
        return { serverUrl: 'wss://chat.example', roomId };
    }, [roomId]);

    useEffect(() => {
        const options = createOptions();
        console.log('connect to', options.roomId);
        return () => console.log('disconnect from', options.roomId);
    }, [createOptions]);

    return (
        <input
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder={`Message #${roomId}`}
        />
    );
}

export default function App() {
    const [roomId, setRoomId] = useState('general');
    return (
        <div>
            <button onClick={() => setRoomId('general')}>general</button>
            <button onClick={() => setRoomId('random')}>random</button>
            <ChatRoom roomId={roomId} />
        </div>
    );
}

Escribir un mensaje no reconecta. Cambiar de sala registra una desconexión de la sala vieja y una conexión a la nueva. Borra el envoltorio useCallback (conserva la función flecha) y cada pulsación desconecta y vuelve a conectar.

Aun así, aquí hay una solución más simple: mueve la función dentro del efecto. Así el efecto depende directamente de roomId y ninguna función tiene que ser estable.

useEffect(() => {
    function createOptions() {
        return { serverUrl: 'wss://chat.example', roomId };
    }
    const options = createOptions();
    // ...
}, [roomId]);

Prefiere eso cuando la función solo la usa el efecto. Deja useCallback para las funciones que también pasas hacia abajo o devuelves desde un hook personalizado, donde quienes las llaman podrían ponerlas en sus propios arrays de dependencias.

Comprobar si una función cambió

Cuando un hijo con memo sigue renderizando y no sabes por qué, comprueba si la prop de función es de verdad el mismo objeto entre renderizados. Guarda la anterior en una ref y compara:

import { useCallback, useEffect, useRef, useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    const [step, setStep] = useState(1);

    const increment = useCallback(() => setCount((c) => c + step), [step]);

    const previous = useRef(null);
    useEffect(() => {
        if (previous.current) {
            console.log('increment changed:', previous.current !== increment);
        }
        previous.current = increment;
    });

    return (
        <div>
            <button onClick={increment}>Count: {count}</button>{' '}
            <button onClick={() => setStep(step + 1)}>Step: {step}</button>
        </div>
    );
}

Haz clic en Count: la consola dice increment changed: false, porque step no cambió. Haz clic en Step y dice true: step es una dependencia, así que React devolvió la función nueva. Una función que cambia en cada renderizado suele significar que una dependencia es a su vez nueva en cada renderizado, como un objeto u otra función declarada en el componente.

useCallback en hooks personalizados

Un hook personalizado que devuelve funciones es un buen lugar para useCallback aunque no sepas quién lo va a llamar. El componente que usa el hook puede pasar esas funciones a un hijo con memo o incluirlas en un efecto, y no puede hacerlas estables desde fuera. Envolverlas dentro del hook les da a todos los que lo llaman una referencia estable por defecto:

function useCounter(initial = 0) {
    const [count, setCount] = useState(initial);
    const increment = useCallback(() => setCount((c) => c + 1), []);
    const reset = useCallback(() => setCount(initial), [initial]);
    return { count, increment, reset };
}

El error común: envolverlo todo

useCallback alrededor de un manejador que va directamente a un <button> o un <input> no sirve para nada. React no se ahorra ningún trabajo en un elemento del DOM porque su manejador siga siendo el mismo, y un componente que no está envuelto en memo renderiza igual cuando lo hace su padre.

// Pointless: <button> does not care that the function is the same
const handleClick = useCallback(() => setOpen(true), []);
return <button onClick={handleClick}>Open</button>;

Cada useCallback extra agrega un array de dependencias en el que alguien se puede equivocar, y una dependencia desactualizada es un error real (la función sigue leyendo estado viejo). Agrégalo cuando haya un hijo con memo o un array de dependencias del lado que lo recibe, no por defecto.

El React Compiler 1.0, cuando tu build lo usa, memoiza funciones y valores automáticamente, lo que elimina la necesidad de la mayoría de las llamadas a useCallback escritas a mano. Sin el compilador, las reglas de arriba siguen aplicándose, y useCallback manual sigue siendo habitual en el código existente.