L'hook useCallback di React: quando serve davvero

useCallback mette in cache una funzione tra un rendering e l'altro: restituisce lo stesso oggetto funzione finché una delle sue dipendenze non cambia. Questo conta solo quando qualcosa confronta la funzione per riferimento, il che in pratica significa un figlio racchiuso in memo o un effetto che elenca la funzione come dipendenza.

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>
    );
}

Entrambi i pulsanti sono memorizzati ed entrambi fanno la stessa cosa. Cambia il tema e guarda la Console: compare solo render Inline function, perché saveInline è una nuova funzione a ogni rendering, quindi memo vede una prop cambiata. saveCached è ogni volta la stessa funzione, quindi quel pulsante viene saltato.

Cosa mette in cache

const cachedFn = useCallback(fn, dependencies);

• fn è la funzione che vuoi conservare. React non la chiama; te la restituisce.
• dependencies elenca ogni valore del componente che fn legge. A ogni rendering React li confronta con quelli precedenti usando Object.is.
• Se non è cambiato nulla, ricevi la funzione del rendering precedente. Se qualcosa è cambiato, ricevi la funzione che hai passato questa volta, e React conserva quella per la volta successiva.

Nota cosa significa: la arrow function dentro useCallback viene comunque creata a ogni rendering, perché è solo un argomento. useCallback non risparmia quel lavoro. Il suo unico compito è restituire una funzione più vecchia e identica così che il riferimento resti lo stesso.

useCallback vs useMemo

Sono lo stesso meccanismo. useMemo mette in cache il risultato della chiamata a una funzione, useCallback mette in cache la funzione stessa:

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

Usa useCallback per le funzioni perché si legge meglio, e useMemo per i valori calcolati come una lista filtrata o un oggetto di opzioni.

Eliminare dipendenze con le funzioni di aggiornamento

Una funzione in cache deve elencare ogni valore di stato che legge, e ogni volta che quello stato cambia, cambia anche la funzione. Per una lista di righe memorizzate questo è un problema: una funzione remove che legge todos cambia ogni volta che cambia todos, quindi ogni riga rimasta esegue un nuovo render dopo ogni rimozione. Usa la forma con funzione di aggiornamento del setter così che la funzione non legga più todos affatto.

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>
    );
}

Rimuovi una riga: la Console resta in silenzio, perché le altre righe hanno ricevuto lo stesso oggetto todo e la stessa funzione remove di prima. Cambia la funzione in useCallback((id) => setTodos(todos.filter((t) => t.id !== id)), [todos]) e riprova: ora ogni riga rimasta registra un rendering dopo ogni rimozione.

Funzioni come dipendenze degli effetti

Un effetto che chiama una funzione dichiarata nel componente deve elencare quella funzione come dipendenza. Se la funzione è nuova a ogni rendering, l'effetto viene eseguito dopo ogni rendering. useCallback la mantiene stabile finché i suoi stessi input non cambiano:

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>
    );
}

Scrivere un messaggio non provoca una nuova connessione. Cambiare stanza registra una disconnessione dalla vecchia stanza e una connessione alla nuova. Elimina il wrapper useCallback (tieni la arrow function) e ogni tasto disconnette e riconnette.

C'è però una soluzione più semplice: sposta la funzione dentro l'effetto. Allora l'effetto dipende direttamente da roomId e nessuna funzione deve essere stabile.

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

Preferiscila quando la funzione è usata solo dall'effetto. Tieni useCallback per le funzioni che passi anche verso il basso o che restituisci da un hook personalizzato, dove chi le usa potrebbe metterle nei propri array delle dipendenze.

Verificare se una funzione è cambiata

Quando un figlio con memo continua a renderizzarsi e non sai perché, verifica se la prop funzione è davvero lo stesso oggetto tra un rendering e l'altro. Tieni quella precedente in un ref e confrontale:

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>
    );
}

Clicca Count: la Console dice increment changed: false, perché step non è cambiato. Clicca Step e dice true: step è una dipendenza, quindi React ha restituito la nuova funzione. Una funzione che cambia a ogni rendering di solito significa che una dipendenza è a sua volta nuova a ogni rendering, come un oggetto o un'altra funzione dichiarata nel componente.

useCallback negli hook personalizzati

Un hook personalizzato che restituisce funzioni è un buon posto per useCallback anche quando non sai chi lo chiamerà. Il componente che usa l'hook potrebbe passare quelle funzioni a un figlio con memo o elencarle in un effetto, e non può renderle stabili dall'esterno. Racchiuderle dentro l'hook dà a ogni chiamante un riferimento stabile per default:

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 };
}

L'errore comune: racchiudere tutto

useCallback attorno a un gestore che va direttamente a un <button> o a un <input> non fa nulla di utile. React non salta alcun lavoro per un elemento DOM perché il suo gestore è rimasto lo stesso, e un componente non racchiuso in memo si renderizza comunque quando lo fa il suo genitore.

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

Ogni useCallback in più aggiunge un array delle dipendenze che qualcuno può sbagliare, e una dipendenza vecchia è un vero bug (la funzione continua a leggere lo stato vecchio). Aggiungilo quando dall'altra parte c'è un figlio con memo o un array delle dipendenze, non per default.

React Compiler 1.0, quando la tua build lo usa, memorizza funzioni e valori automaticamente, il che elimina la necessità della maggior parte delle chiamate a useCallback scritte a mano. Senza il compilatore, le regole qui sopra valgono ancora, e useCallback scritto a mano è ancora comune nel codice esistente.