React Academy · Lezione

Selector e prevenzione dei re-render non necessari

Estragga porzioni specifiche dello stato tramite selector, così i componenti eseguono il re-render solo quando necessario.

Selector e prevenzione dei re-render non necessari è 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.

Benvenuti

In questa lezione utilizzerà i selettori Zustand per iscrivere i componenti solo alle slice di stato di cui hanno bisogno, evitando rendering non necessari quando cambiano altre parti dello store.

Il problema del selettore predefinito

Chiamare l'hook dello store senza un selettore restituisce l'intero oggetto dello store. Il componente esegue nuovamente il rendering a OGNI modifica dello store, anche quando cambia uno stato non correlato.

// Bad: re-renders on every store change
const store = useAppStore();
return <p>{store.user.name}</p>;

Utilizzo di un selettore

Passi una funzione selettore all'hook dello store. Il componente esegue nuovamente il rendering solo quando cambia il valore restituito dal selettore.

// Good: re-renders only when user.name changes
const name = useAppStore(s => s.user.name);
return <p>{name}</p>;

Controllo dell'uguaglianza dei riferimenti

Zustand utilizza per impostazione predefinita l'uguaglianza rigorosa (===). Se il selettore restituisce un nuovo oggetto o array a ogni chiamata, il componente viene renderizzato nuovamente anche quando il contenuto è uguale.

// Creates a new object every time — always re-renders!
const info = useStore(s => ({ id: s.id, name: s.name }));

Correzione con l'uguaglianza shallow

Importi `shallow` da zustand e lo passi come funzione di uguaglianza per evitare nuovi rendering quando il contenuto degli oggetti è uguale.

import { shallow } from 'zustand/shallow';

const info = useAppStore(
  s => ({ id: s.id, name: s.name }),
  shallow // compare by content, not reference
);

Selezione di più valori

Utilizzi il modello basato su shallow equality per selezionare più valori contemporaneamente senza causare rendering non necessari.

const { items, loading } = useCartStore(
  s => ({ items: s.items, loading: s.loading }),
  shallow
);

Riferimenti stabili alle azioni

Le azioni, ovvero le funzioni, in Zustand hanno riferimenti stabili: non cambiano quando lo stato viene aggiornato. Può selezionarle senza shallow e non causeranno nuovi rendering.

// Actions are always stable — no shallow needed
const addToCart = useCartStore(s => s.addToCart);

Helper useShallow (Zustand v5+)

Zustand v5 fornisce una utility useShallow che avvolge automaticamente il selettore con l'uguaglianza shallow, rendendo il codice più pulito.

import { useShallow } from 'zustand/react/shallow';

const { items, loading } = useCartStore(
  useShallow(s => ({ items: s.items, loading: s.loading }))
);

Combinazione dei selettori

Ricavi i valori calcolati all'interno dei selettori per evitare di memorizzare lo stato derivato nello store. Calcoli totali, elenchi filtrati o stringhe formattate nel selettore.

const totalPrice = useCartStore(
  s => s.items.reduce((sum, item) => sum + item.price, 0)
);

Profilazione dei rendering di Zustand

Utilizzi React DevTools Profiler per verificare il funzionamento dei selettori. Dopo aver aggiunto allo store un elemento non correlato, controlli che il componente che utilizza solo il selettore name NON compaia nel flame graph del commit.

Verifica rapida

Perché è necessario utilizzare l'uguaglianza shallow quando un selettore Zustand restituisce un oggetto?

Riepilogo

Utilizzi sempre selettori specifici. Utilizzi l'uguaglianza shallow quando seleziona più valori come oggetto. Ricavi i valori calcolati all'interno dei selettori. Le azioni hanno riferimenti stabili e non richiedono shallow.

Prossima lezione

Prossima lezione: **Persistenza dello stato con il middleware persist** — sincronizzerà lo stato Zustand con localStorage utilizzando il middleware persist.

Domande Frequenti

La lezione «Selector e prevenzione dei re-render non necessari» è gratuita?

Sì — il testo completo di «Selector e prevenzione dei re-render non necessari» è 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 «Selector e prevenzione dei re-render non necessari»?

Estragga porzioni specifiche dello stato tramite selector, così i componenti eseguono il re-render solo quando necessario. 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 «Selector e prevenzione dei re-render non necessari»?

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

Creazione del primo store Zustand
Selector e prevenzione dei re-render non necessari
Persistenza dello stato con il middleware persist
DevTools di Zustand e test degli store

← Torna a React Academy