useCallback

const cachedFn = useCallback(fn, dependencies)

• Reference
  • useCallback(fn, dependencies)
• Usage
  • Saltare la ri-renderizzazione dei componenti
  • Aggiornare lo state da un callback memorizzato
  • Impedire a un Effetto di attivarsi troppo spesso
  • Ottimizzare un custom Hook
• Troubleshooting
  • Ogni volta che il mio componente viene renderizzato, useCallback restituisce una funzione diversa
  • Devo chiamare useCallback per ogni elemento di una lista in un loop, ma non è permesso

Reference

useCallback(fn, dependencies)

Chiama useCallback al top level del tuo componente per memorizzare nella cache una definizione di funzione tra le ri-renderizzazioni:

import { useCallback } from 'react';

export default function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

Vedi altri esempi sotto.

Parameters

• fn: Il valore funzione che vuoi memorizzare nella cache. Può accettare qualsiasi argomento e restituire qualsiasi valore. React restituirà (non chiamerà!) la tua funzione durante la renderizzazione iniziale. Nelle renderizzazioni successive, React ti restituirà la stessa funzione se le dependencies non sono cambiate dall’ultima renderizzazione. Altrimenti, ti restituirà la funzione che hai passato durante la renderizzazione corrente e la memorizzerà nel caso possa essere riutilizzata in seguito. React non chiamerà la tua funzione. La funzione ti viene restituita così puoi decidere quando e se chiamarla.

• dependencies: L’elenco di tutti i valori reattivi referenziati all’interno del codice di fn. I valori reattivi includono props, state e tutte le variabili e funzioni dichiarate direttamente nel corpo del componente. Se il tuo linter è configurato per React, verificherà che ogni valore reattivo sia specificato correttamente come dipendenza. L’elenco delle dipendenze deve avere un numero costante di elementi ed essere scritto inline come [dep1, dep2, dep3]. React confronterà ogni dipendenza con il suo valore precedente usando l’algoritmo di confronto Object.is.

Returns

Nella renderizzazione iniziale, useCallback restituisce la funzione fn che hai passato.

Nelle renderizzazioni successive, restituirà una funzione fn già memorizzata dall’ultima renderizzazione (se le dipendenze non sono cambiate), oppure restituirà la funzione fn che hai passato durante questa renderizzazione.

Caveats

• useCallback è un Hook, quindi puoi chiamarlo solo al top level del tuo componente o dei tuoi Hook. Non puoi chiamarlo all’interno di loop o condizioni. Se ne hai bisogno, estrai un nuovo componente e sposta lo state al suo interno.
• React non scarterà la funzione memorizzata nella cache a meno che non ci sia una ragione specifica per farlo. Per esempio, in development, React scarta la cache quando modifichi il file del componente. Sia in development che in production, React scarterà la cache se il componente sospende durante il mount iniziale. In futuro, React potrebbe aggiungere altre funzionalità che sfruttano lo scarto della cache — per esempio, se React aggiungesse supporto integrato per liste virtualizzate in futuro, avrebbe senso scartare la cache per gli elementi che escono dal viewport di una tabella virtualizzata. Questo dovrebbe corrispondere alle tue aspettative se ti affidi a useCallback come ottimizzazione delle prestazioni. Altrimenti, una variabile di state o un ref potrebbero essere più appropriati.

Usage

Saltare la ri-renderizzazione dei componenti

Quando ottimizzi le prestazioni di rendering, a volte dovrai memorizzare nella cache le funzioni che passi ai componenti figli. Vediamo prima la sintassi per farlo, e poi in quali casi è utile.

Per memorizzare nella cache una funzione tra le ri-renderizzazioni del componente, avvolgi la sua definizione nell’Hook useCallback:

import { useCallback } from 'react';

function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);
  // ...

Devi passare due cose a useCallback:

1. Una definizione di funzione che vuoi memorizzare nella cache tra le ri-renderizzazioni.
2. Un elenco di dipendenze che include ogni valore all’interno del componente usato all’interno della funzione.

Nella renderizzazione iniziale, la funzione restituita che otterrai da useCallback sarà la funzione che hai passato.

Nelle renderizzazioni successive, React confronterà le dipendenze con le dipendenze che hai passato durante la renderizzazione precedente. Se nessuna delle dipendenze è cambiata (rispetto a Object.is), useCallback restituirà la stessa funzione di prima. Altrimenti, useCallback restituirà la funzione che hai passato in questa renderizzazione.

In altre parole, useCallback memorizza nella cache una funzione tra le ri-renderizzazioni finché le sue dipendenze non cambiano.

Vediamo un esempio per capire quando questo è utile.

Supponiamo che tu stia passando una funzione handleSubmit da ProductPage al componente ShippingForm:

function ProductPage({ productId, referrer, theme }) {
  // ...
  return (
    <div className={theme}>
      <ShippingForm onSubmit={handleSubmit} />
    </div>
  );

Hai notato che cambiare la prop theme blocca l’app per un momento, ma se rimuovi <ShippingForm /> dal JSX, sembra veloce. Questo ti dice che vale la pena provare a ottimizzare il componente ShippingForm.

Per impostazione predefinita, quando un componente viene ri-renderizzato, React ri-renderizza ricorsivamente tutti i suoi figli. Ecco perché, quando ProductPage viene ri-renderizzato con un theme diverso, anche il componente ShippingForm viene ri-renderizzato. Va bene per componenti che non richiedono molto calcolo per la ri-renderizzazione. Ma se hai verificato che una ri-renderizzazione è lenta, puoi dire a ShippingForm di saltare la ri-renderizzazione quando le sue props sono le stesse dell’ultima renderizzazione avvolgendolo in memo:

import { memo } from 'react';

const ShippingForm = memo(function ShippingForm({ onSubmit }) {
  // ...
});

Con questa modifica, ShippingForm salterà la ri-renderizzazione se tutte le sue props sono le stesse dell’ultima renderizzazione. È qui che memorizzare nella cache una funzione diventa importante! Supponiamo che tu abbia definito handleSubmit senza useCallback:

function ProductPage({ productId, referrer, theme }) {
  // Ogni volta che theme cambia, questa sarà una funzione diversa...
  function handleSubmit(orderDetails) {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }

  return (
    <div className={theme}>
      {/* ... quindi le props di ShippingForm non saranno mai le stesse, e si ri-renderizzerà ogni volta */}
      <ShippingForm onSubmit={handleSubmit} />
    </div>
  );
}

In JavaScript, una function () {} o () => {} crea sempre una funzione diversa, simile a come il letterale oggetto {} crea sempre un nuovo oggetto. Normalmente, questo non sarebbe un problema, ma significa che le props di ShippingForm non saranno mai le stesse, e la tua ottimizzazione con memo non funzionerà. È qui che useCallback torna utile:

function ProductPage({ productId, referrer, theme }) {
  // Dì a React di memorizzare nella cache la tua funzione tra le ri-renderizzazioni...
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]); // ...finché queste dipendenze non cambiano...

  return (
    <div className={theme}>
      {/* ...ShippingForm riceverà le stesse props e potrà saltare la ri-renderizzazione */}
      <ShippingForm onSubmit={handleSubmit} />
    </div>
  );
}

Avvolgendo handleSubmit in useCallback, ti assicuri che sia la stessa funzione tra le ri-renderizzazioni (finché le dipendenze non cambiano). Non devi avvolgere una funzione in useCallback a meno di farlo per una ragione specifica. In questo esempio, la ragione è che la passi a un componente avvolto in memo, e questo gli permette di saltare la ri-renderizzazione. Ci sono altre ragioni per cui potresti aver bisogno di useCallback, descritte più avanti in questa pagina.

import { useMemo, useCallback } from 'react';

function ProductPage({ productId, referrer }) {
  const product = useData('/product/' + productId);

  const requirements = useMemo(() => { // Chiama la tua funzione e memorizza il risultato
    return computeRequirements(product);
  }, [product]);

  const handleSubmit = useCallback((orderDetails) => { // Memorizza la funzione stessa
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

  return (
    <div className={theme}>
      <ShippingForm requirements={requirements} onSubmit={handleSubmit} />
    </div>
  );
}

// Implementazione semplificata (all'interno di React)
function useCallback(fn, dependencies) {
  return useMemo(() => fn, dependencies);
}

Aggiornare lo state da un callback memorizzato

A volte, potresti aver bisogno di aggiornare lo state in base allo state precedente da un callback memorizzato.

Questa funzione handleAddTodo specifica todos come dipendenza perché calcola i prossimi todos da esso:

function TodoList() {
  const [todos, setTodos] = useState([]);

  const handleAddTodo = useCallback((text) => {
    const newTodo = { id: nextId++, text };
    setTodos([...todos, newTodo]);
  }, [todos]);
  // ...

Di solito vorrai che le funzioni memorizzate abbiano il minor numero possibile di dipendenze. Quando leggi dello state solo per calcolare il prossimo state, puoi rimuovere quella dipendenza passando una funzione updater invece:

function TodoList() {
  const [todos, setTodos] = useState([]);

  const handleAddTodo = useCallback((text) => {
    const newTodo = { id: nextId++, text };
    setTodos(todos => [...todos, newTodo]);
  }, []); // ✅ Non serve la dipendenza todos
  // ...

Qui, invece di usare todos come dipendenza e leggerlo all’interno, passi a React un’istruzione su come aggiornare lo state (todos => [...todos, newTodo]). Leggi di più sulle funzioni updater.

Impedire a un Effetto di attivarsi troppo spesso

A volte, potresti voler chiamare una funzione dall’interno di un Effetto:

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

  function createOptions() {
    return {
      serverUrl: 'https://localhost:1234',
      roomId: roomId
    };
  }

  useEffect(() => {
    const options = createOptions();
    const connection = createConnection(options);
    connection.connect();
    // ...

Questo crea un problema. Ogni valore reattivo deve essere dichiarato come dipendenza del tuo Effetto. Tuttavia, se dichiari createOptions come dipendenza, causerà la riconnessione costante del tuo Effetto alla chat room:

  useEffect(() => {
    const options = createOptions();
    const connection = createConnection(options);
    connection.connect();
    return () => connection.disconnect();
  }, [createOptions]); // 🔴 Problema: questa dipendenza cambia ad ogni renderizzazione
  // ...

Per risolvere, puoi avvolgere la funzione che devi chiamare da un Effetto in useCallback:

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

  const createOptions = useCallback(() => {
    return {
      serverUrl: 'https://localhost:1234',
      roomId: roomId
    };
  }, [roomId]); // ✅ Cambia solo quando roomId cambia

  useEffect(() => {
    const options = createOptions();
    const connection = createConnection(options);
    connection.connect();
    return () => connection.disconnect();
  }, [createOptions]); // ✅ Cambia solo quando createOptions cambia
  // ...

Questo garantisce che la funzione createOptions sia la stessa tra le ri-renderizzazioni se roomId è lo stesso. Tuttavia, è ancora meglio eliminare la necessità di una dipendenza funzione. Sposta la funzione all’interno dell’Effetto:

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

  useEffect(() => {
    function createOptions() { // ✅ Non serve useCallback o dipendenze funzione!
      return {
        serverUrl: 'https://localhost:1234',
        roomId: roomId
      };
    }

    const options = createOptions();
    const connection = createConnection(options);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ Cambia solo quando roomId cambia
  // ...

Ora il codice è più semplice e non ha bisogno di useCallback. Scopri di più sulla rimozione delle dipendenze degli Effetti.

Ottimizzare un custom Hook

Se stai scrivendo un custom Hook, è consigliato avvolgere in useCallback tutte le funzioni che restituisce:

function useRouter() {
  const { dispatch } = useContext(RouterStateContext);

  const navigate = useCallback((url) => {
    dispatch({ type: 'navigate', url });
  }, [dispatch]);

  const goBack = useCallback(() => {
    dispatch({ type: 'back' });
  }, [dispatch]);

  return {
    navigate,
    goBack,
  };
}

Questo garantisce che i consumatori del tuo Hook possano ottimizzare il proprio codice quando necessario.

Troubleshooting

Ogni volta che il mio componente viene renderizzato, useCallback restituisce una funzione diversa

Assicurati di aver specificato l’array di dipendenze come secondo argomento!

Se dimentichi l’array di dipendenze, useCallback restituirà una nuova funzione ogni volta:

function ProductPage({ productId, referrer }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }); // 🔴 Restituisce una nuova funzione ogni volta: nessun array di dipendenze
  // ...

Questa è la versione corretta che passa l’array di dipendenze come secondo argomento:

function ProductPage({ productId, referrer }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]); // ✅ Non restituisce una nuova funzione inutilmente
  // ...

Se questo non aiuta, il problema è che almeno una delle tue dipendenze è diversa dalla renderizzazione precedente. Puoi debuggare questo problema registrando manualmente le dipendenze nella console:

  const handleSubmit = useCallback((orderDetails) => {
    // ..
  }, [productId, referrer]);

  console.log([productId, referrer]);

Puoi poi fare clic destro sugli array di renderizzazioni diverse nella console e selezionare “Store as a global variable” per entrambi. Supponendo che il primo sia stato salvato come temp1 e il secondo come temp2, puoi usare la console del browser per verificare se ogni dipendenza in entrambi gli array è la stessa:

Object.is(temp1[0], temp2[0]); // La prima dipendenza è la stessa tra gli array?
Object.is(temp1[1], temp2[1]); // La seconda dipendenza è la stessa tra gli array?
Object.is(temp1[2], temp2[2]); // ... e così via per ogni dipendenza ...

Quando trovi quale dipendenza rompe la memorizzazione, trova un modo per rimuoverla, oppure memorizzala anche.

Devo chiamare useCallback per ogni elemento di una lista in un loop, ma non è permesso

Supponiamo che il componente Chart sia avvolto in memo. Vuoi saltare la ri-renderizzazione di ogni Chart nella lista quando il componente ReportList viene ri-renderizzato. Tuttavia, non puoi chiamare useCallback in un loop:

function ReportList({ items }) {
  return (
    <article>
      {items.map(item => {
        // 🔴 Non puoi chiamare useCallback in un loop così:
        const handleClick = useCallback(() => {
          sendReport(item)
        }, [item]);

        return (
          <figure key={item.id}>
            <Chart onClick={handleClick} />
          </figure>
        );
      })}
    </article>
  );
}

Invece, estrai un componente per un singolo elemento, e metti useCallback lì:

function ReportList({ items }) {
  return (
    <article>
      {items.map(item =>
        <Report key={item.id} item={item} />
      )}
    </article>
  );
}

function Report({ item }) {
  // ✅ Chiama useCallback al top level:
  const handleClick = useCallback(() => {
    sendReport(item)
  }, [item]);

  return (
    <figure>
      <Chart onClick={handleClick} />
    </figure>
  );
}

In alternativa, potresti rimuovere useCallback nell’ultimo snippet e invece avvolgere Report stesso in memo. Se la prop item non cambia, Report salterà la ri-renderizzazione, quindi anche Chart salterà la ri-renderizzazione:

function ReportList({ items }) {
  // ...
}

const Report = memo(function Report({ item }) {
  function handleClick() {
    sendReport(item);
  }

  return (
    <figure>
      <Chart onClick={handleClick} />
    </figure>
  );
});