React Academy · Lezione

Separazione dei context per limitare i re-render

Separi i valori che cambiano frequentemente da quelli stabili, inserendoli in context diversi.

Separazione dei context per limitare i re-render è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 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à a suddividere i Context di React in provider separati per ridurre al minimo i nuovi rendering quando cambia solo una parte del valore del context.

Il problema dei nuovi rendering con Context

Ogni componente che chiama useContext(MyCtx) viene sottoposto a un nuovo rendering quando cambia QUALSIASI parte del valore del context, anche se la parte utilizzata dal componente non è cambiata. Un singolo context di grandi dimensioni può causare molti nuovi rendering non necessari.

Suddividere in base alla frequenza di aggiornamento

Separi i valori che cambiano frequentemente da quelli che cambiano raramente. Inserisca ogni gruppo nel proprio context. I consumer si iscrivono solo al context di cui hanno bisogno.

const ThemeCtx = createContext('light');
const UserCtx = createContext(null);
// theme changes rarely; user changes on login/logout — same frequency is fine
// but notifCount changes every second — split it out!

Separare i context dei dati e del dispatch

Un pattern comune consiste nel suddividere un context per i dati dello stato, che viene sottoposto a un nuovo rendering a ogni modifica, e un altro per le funzioni di dispatch/setter, che sono stabili e non causano mai nuovi rendering dei consumer. I consumer che usano solo il dispatch non vengono sottoposti a nuovi rendering quando cambiano i dati.

const CountCtx = createContext(0);
const SetCountCtx = createContext(() => {});

function Provider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountCtx.Provider value={count}>
      <SetCountCtx.Provider value={setCount}>
        {children}
      </SetCountCtx.Provider>
    </CountCtx.Provider>
  );
}

Memoizzare il context del dispatch

I setter restituiti da useState sono stabili, ovvero mantengono lo stesso riferimento a ogni rendering, quindi il valore del context del dispatch non cambia. Tuttavia, se calcola un oggetto di azioni, lo racchiuda in useMemo.

const actions = useMemo(() => ({
  increment: () => setCount(c => c + 1),
  reset: () => setCount(0),
}), []); // stable — empty deps

Provider annidati

Annidi più provider nell'albero dei componenti. I consumer importano e usano solo il context specifico di cui hanno bisogno, mantenendo ristrette le sottoscrizioni.

function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <NotificationsProvider>
          <Router />
        </NotificationsProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

Profilare prima di suddividere

Esegua sempre una profilazione con React DevTools prima di suddividere i context. I nuovi rendering non necessari sono un problema solo se risultano costosi. Non progetti context eccessivamente complessi se il loro nuovo rendering è rapido.

Compromessi della suddivisione dei context

Un numero maggiore di context comporta un numero maggiore di provider nell'albero dei componenti. Questo aumenta il carico cognitivo. Suddivida i context solo quando la profilazione evidenzia un problema di prestazioni, non in via preventiva.

Combinare con React.memo

Anche con un singolo context, racchiudere i componenti figlio costosi in React.memo fa sì che vengano sottoposti a un nuovo rendering solo quando cambiano le loro props, non quando cambia il context. Questa può essere un'alternativa più semplice alla suddivisione.

const ExpensiveChild = React.memo(function({ label }) {
  return <div>{label}</div>;
}); // won't re-render on context change if label hasn't changed

useReducer + Context

Combini useReducer con context per gestire stati complessi. Memorizzi lo stato in un context e la funzione di dispatch in un altro. Il dispatch è stabile, mentre lo stato viene aggiornato a ogni azione.

Verifica rapida

Perché suddividere lo stato e il dispatch in context separati migliora le prestazioni?

Riepilogo

Suddivida i context in base alla frequenza di aggiornamento: lo stato che cambia frequentemente in un context, il dispatch e i setter stabili in un altro. Esegua prima la profilazione, suddivida i context solo quando è necessario e consideri React.memo come alternativa più semplice.

Prossimo argomento

Lezione successiva: **Memoizzare i valori del Context con useMemo**: racchiuderà gli oggetti valore del context in useMemo, così i consumer non verranno sottoposti a nuovi rendering quando i dati non cambiano.

Domande Frequenti

La lezione «Separazione dei context per limitare i re-render» è gratuita?

Sì — il testo completo di «Separazione dei context per limitare i re-render» è 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 «Separazione dei context per limitare i re-render»?

Separi i valori che cambiano frequentemente da quelli stabili, inserendoli in context diversi. 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 1 di 4.

Quanto tempo richiede la lezione «Separazione dei context per limitare i re-render»?

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