React Academy · Lezione

Pattern dei context selector

Implementi un semplice hook selector che esegua il re-render solo quando cambia una porzione del context.

Pattern dei context selector è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 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 implementerà un hook selettore del context che iscrive un componente solo a una porzione dello stato del context, impedendo nuovi rendering quando cambiano parti non correlate del context.

Il problema dei selettori

useContext causa un nuovo rendering quando cambia QUALSIASI parte del context. Se un componente ha bisogno solo del nome dell'utente, ma il context contiene anche un elenco di notifiche, l'aggiunta di una notifica sottopone inutilmente a un nuovo rendering il componente che mostra il nome.

Che cos'è un selettore?

Un selettore è una funzione che estrae una parte specifica dello stato da un oggetto di stato più grande: `state => state.user.name`. Un hook selettore si iscrive al context, ma attiva un nuovo rendering solo quando cambia il valore selezionato.

Hook selettore semplice

Costruisca un hook useSelector che legga il context e lo racchiuda in useMemo usando il risultato del selettore come dipendenza. Il componente viene sottoposto a un nuovo rendering solo quando cambia il valore selezionato.

function useAppSelector(selector) {
  const state = useContext(AppCtx);
  return useMemo(() => selector(state), [state, selector]);
}

// Consumer only re-renders when user.name changes
const name = useAppSelector(s => s.user.name);

Controllo dell'uguaglianza superficiale

Anche useMemo con un selettore causa un nuovo rendering se il selettore restituisce un nuovo riferimento a un oggetto o a un array a ogni chiamata, ad esempio `s => s.items.filter(...)`. Usi un confronto di uguaglianza superficiale per evitare nuovi rendering quando il contenuto è lo stesso.

import { useRef } from 'react';

function useSelector(selector) {
  const state = useContext(AppCtx);
  const selected = selector(state);
  const ref = useRef(selected);
  if (!shallowEqual(ref.current, selected)) {
    ref.current = selected;
  }
  return ref.current;
}

Libreria use-context-selector

Per l'uso in produzione, la libreria **use-context-selector** fornisce un hook `useContextSelector` con sottoscrizioni e controlli di uguaglianza efficienti, senza la necessità di usare gestori di stato esterni.

import { useContextSelector } from 'use-context-selector';

const name = useContextSelector(AppCtx, s => s.user.name);

Zustand come soluzione nativa per i selettori

L'hook `useStore(selector)` di Zustand offre il supporto integrato per i selettori con l'uguaglianza superficiale inclusa, rendendolo adatto agli alberi di stato di grandi dimensioni in cui sono importanti le sottoscrizioni dettagliate.

const name = useAppStore(state => state.user.name);

Quando i selettori sono eccessivi

Se gli aggiornamenti del context sono poco frequenti e i consumer sono semplici da sottoporre a un nuovo rendering, i selettori aggiungono complessità senza un beneficio misurabile. Esegua prima la profilazione: ottimizzi sempre sulla base dei dati.

Memoizzare le funzioni selettore

Se crea il selettore direttamente nel corpo del componente, a ogni rendering viene creato un nuovo riferimento alla funzione, con il rischio di compromettere la memoizzazione. Definisca i selettori al di fuori del componente oppure usi useCallback.

// Outside component — stable reference
const selectName = s => s.user.name;

function Profile() {
  const name = useAppSelector(selectName);
  return <p>{name}</p>;
}

Selettori derivati

Componi i selettori chiamandone uno dall'interno di un altro. I selettori derivati calcolano valori a partire dai selettori di base, mantenendo la logica di business fuori dai componenti.

const selectFullName = s => s.user.firstName + ' ' + s.user.lastName;

Verifica rapida

Perché le funzioni selettore dovrebbero essere definite al di fuori del corpo del componente quando vengono usate con useContextSelector o useMemo?

Riepilogo

I selettori estraggono una porzione dello stato del context e impediscono nuovi rendering quando cambiano parti non correlate. Definisca i selettori al di fuori dei componenti per mantenere stabili i riferimenti. Usi use-context-selector o Zustand per un supporto ai selettori adatto alla produzione.

Prossimo argomento

Lezione successiva: **Quando non usare Context**: imparerà a riconoscere quando il passaggio delle props, la composizione o un gestore di stato sono soluzioni più adatte di Context.

Domande Frequenti

La lezione «Pattern dei context selector» è gratuita?

Sì — il testo completo di «Pattern dei context selector» è 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 «Pattern dei context selector»?

Implementi un semplice hook selector che esegua il re-render solo quando cambia una porzione del context. 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 3 di 4.

Quanto tempo richiede la lezione «Pattern dei context selector»?

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