React Academy · Lezione

Memoizzazione dei valori del context con useMemo

Racchiuda gli oggetti valore del context in useMemo per evitare re-render non necessari dei consumer.

Memoizzazione dei valori del context con useMemo è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuto

In questa lezione imparerà perché gli oggetti valore del context devono essere memoizzati con useMemo e come configurare correttamente le dipendenze per evitare nuovi rendering non necessari.

Il problema dei riferimenti agli oggetti

Ogni volta che un componente Provider viene sottoposto a un nuovo rendering, viene creato un nuovo oggetto letterale `{ ... }` come valore del context, anche se il contenuto è lo stesso. Tutti i consumer vengono sottoposti a un nuovo rendering perché il riferimento è cambiato.

// Every render creates a new object!
<UserCtx.Provider value={{ user, logout }}>
  {children}
</UserCtx.Provider>

Risolvere con useMemo

Racchiuda il valore del context in useMemo, così tra un rendering e l'altro viene restituito lo stesso riferimento all'oggetto quando nulla nell'array delle dipendenze è cambiato.

const value = useMemo(
  () => ({ user, logout }),
  [user, logout]
);

<UserCtx.Provider value={value}>
  {children}
</UserCtx.Provider>

Scegliere con attenzione le dipendenze

Includa nell'array delle dipendenze ogni valore utilizzato all'interno di useMemo. La mancanza di dipendenze causa valori obsoleti. Includa le props primitive, come stringhe e numeri, e i riferimenti stabili, come le funzioni racchiuse in useCallback.

Funzioni stabili con useCallback

I valori funzione cambiano riferimento a ogni rendering. Li racchiuda in useCallback prima di includerli in un valore del context memoizzato con useMemo, per evitare nuovi rendering non necessari.

const logout = useCallback(() => {
  clearSession();
  setUser(null);
}, []);

const value = useMemo(() => ({ user, logout }), [user, logout]);

Quando la memoizzazione non è necessaria

Se il componente Provider non viene mai sottoposto a un nuovo rendering, ad esempio perché si trova all'estremità superiore dell'albero e il suo parent non cambia, useMemo aggiunge un costo senza alcun beneficio. Memoizzi solo quando il Provider stesso viene sottoposto a nuovi rendering.

I valori primitivi sono già stabili

Se il valore del context è un primitivo, come una stringa, un numero o un booleano, NON ha bisogno di useMemo: i primitivi vengono confrontati per valore, non per riferimento. `value={isDark}` non causerà nuovi rendering aggiuntivi.

// No useMemo needed for primitives
<ThemeCtx.Provider value={isDark ? 'dark' : 'light'}>
  {children}
</ThemeCtx.Provider>

Profilare l'effetto della memoizzazione

Usi il Profiler di React DevTools per verificare che racchiudere il valore del context in useMemo riduca effettivamente i nuovi rendering. Registri una sessione prima e dopo per osservare la differenza nel numero di commit.

Context memoizzati annidati

Quando più context sono annidati, memoizzi ciascuno in modo indipendente. Le modifiche a un context non influenzeranno il valore memoizzato di un altro.

Il pattern del componente Provider

Incapsuli il context, lo stato e la memoizzazione all'interno di un componente Provider dedicato. Esporti un hook personalizzato per usare il context. Questo è il pattern canonico per i context riutilizzabili.

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  const logout = useCallback(() => setUser(null), []);
  const value = useMemo(() => ({ user, logout }), [user, logout]);
  return <UserCtx.Provider value={value}>{children}</UserCtx.Provider>;
}

export const useUser = () => useContext(UserCtx);

Verifica rapida

Qual è il motivo principale per racchiudere un oggetto valore del context in useMemo?

Riepilogo

Racchiuda gli oggetti valore del context in useMemo con le dipendenze corrette. Renda stabili i valori funzione con useCallback. I primitivi non richiedono la memoizzazione. Incapsuli la configurazione del context in un componente Provider con un hook personalizzato.

Prossimo argomento

Lezione successiva: **Pattern dei selettori di Context**: implementerà un hook selettore che sottopone i consumer a un nuovo rendering solo quando cambia una specifica porzione del context.

Domande Frequenti

La lezione «Memoizzazione dei valori del context con useMemo» è gratuita?

Sì — il testo completo di «Memoizzazione dei valori del context con useMemo» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Memoizzazione dei valori del context con useMemo»?

Racchiuda gli oggetti valore del context in useMemo per evitare re-render non necessari dei consumer. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Memoizzazione dei valori del context con useMemo»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Separazione dei context per limitare i re-render
Memoizzazione dei valori del context con useMemo
Pattern dei context selector
Quando non usare il context

← Torna a React Academy