useMemo e useCallback per le prestazioni
Memorizzare i calcoli costosi con useMemo e mantenere riferimenti stabili alle funzioni con useCallback per evitare re-rendering non necessari dei componenti figli.
useMemo e useCallback per le prestazioni è una lezione Frontend 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Comportamento predefinito di React
Per impostazione predefinita, React esegue nuovamente il rendering di un componente ogni volta che cambiano il suo stato o il componente padre esegue nuovamente il rendering. Anche i componenti figli eseguono nuovamente il rendering, persino quando le loro props non sono cambiate. Per la maggior parte dei componenti va bene così: React è veloce.
useMemo — Memoizzare valori costosi
useMemo(fn, deps) memorizza nella cache il risultato di un calcolo. La funzione viene eseguita solo quando cambiano le dipendenze. Lo utilizzi per calcoli costosi che sarebbe inefficiente ripetere a ogni rendering.
const expensiveResult = useMemo(() => {
return items.filter(item => item.category === category).sort((a, b) => a.price - b.price);
}, [items, category]);
// Only recalculates when items or category changesuseCallback — Memoizzare funzioni
useCallback(fn, deps) restituisce una funzione memoizzata che mantiene la stessa referenza finché le deps non cambiano. Lo utilizzi quando passa callback a componenti profondamente annidati o memoizzati.
const handleDelete = useCallback((id: string) => {
setItems(prev => prev.filter(item => item.id !== id));
}, []); // stable reference — empty deps because only setItems is used
<ItemList items={items} onDelete={handleDelete} />React.memo — Evitare rendering ripetuti
React.memo(Component) racchiude un componente in modo che esegua nuovamente il rendering solo quando cambiano le sue props (confronto superficiale). Lo combini con useCallback per ottenere props di callback stabili.
const MemoItem = React.memo(function Item({ text, onDelete }: ItemProps) {
console.log('Item rendered:', text); // only logs when props change
return <li>{text} <button onClick={onDelete}>×</button></li>;
});
// onDelete must be stable (from useCallback) for memo to helpQuando NON ottimizzare
L'ottimizzazione prematura è una trappola. useMemo e useCallback hanno un costo: la closure e il confronto delle dipendenze. Per operazioni poco costose (come filtrare 10 elementi), l'overhead supera il vantaggio. Ottimizzi quando rileva un problema reale di prestazioni.
Profilare prima di ottimizzare
Utilizzi React DevTools Profiler per misurare i tempi effettivi di rendering prima di aggiungere la memoizzazione. Il Profiler mostra quali componenti richiedono più tempo e quante volte eseguono il rendering. Intervenga sulla base dei dati, non delle supposizioni.
useMemo per mantenere referenze stabili
useMemo è utile anche per mantenere stabile una referenza, non per migliorare le prestazioni del calcolo in sé, ma per impedire che una memo o un effetto a valle venga rieseguito inutilmente.
// Without useMemo, this creates a new array every render:
const config = useMemo(() => ({ endpoint: '/api', timeout: 5000 }), []);
// Without memoization, useEffect would re-run on every render:
useEffect(() => { initSDK(config); }, [config]);Dipendenze di useCallback
useCallback segue le stesse regole sulle dipendenze di useEffect. Includa ogni variabile dell'ambito esterno utilizzata dalla callback. I setter dello stato (restituiti da useState) sono sempre stabili e non devono essere inclusi nelle deps.
Il rapporto tra useMemo e useCallback
useCallback(fn, deps) equivale a useMemo(() => fn, deps). Sono lo stesso meccanismo: useCallback è semplicemente una sintassi abbreviata per memoizzare specificamente le funzioni.
Memoizzazione degli elementi di un elenco
Un pattern comune: memoizzare i componenti degli elementi di un elenco quando l'elenco è grande e viene sottoposto frequentemente a nuovo rendering. Passi callback stabili da useCallback per non vanificare la memoizzazione.
const MemoRow = React.memo(Row);
const handleEdit = useCallback((id) => edit(id), []);
const handleDel = useCallback((id) => remove(id), []);
{rows.map(row => (
<MemoRow key={row.id} row={row} onEdit={handleEdit} onDelete={handleDel} />
))}Memoizzazione del valore di Context
Memoizzi il valore passato a un Provider di Context per evitare che tutti i consumer eseguano nuovamente il rendering ogni volta che il componente padre del Provider esegue nuovamente il rendering.
const value = useMemo(() => ({ user, login, logout }), [user]);Verifica rapida
Qual è lo scopo di useCallback?
Riepilogo: useMemo e useCallback
useMemo memorizza nella cache i valori calcolati costosi. useCallback memorizza nella cache le referenze alle funzioni. React.memo evita nuovi rendering quando le props non cambiano secondo un confronto superficiale. Combini tutti e tre per ottimizzare le prestazioni a livello di componente. Profili prima: la memoizzazione prematura aggiunge complessità senza vantaggi. Le referenze stabili impediscono a effetti e memo a valle di essere rieseguiti.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 41
- Lezioni
- 163
Domande Frequenti
La lezione «useMemo e useCallback per le prestazioni» è gratuita?
Sì — il testo completo di «useMemo e useCallback per le prestazioni» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «useMemo e useCallback per le prestazioni»?
Memorizzare i calcoli costosi con useMemo e mantenere riferimenti stabili alle funzioni con useCallback per evitare re-rendering non necessari dei componenti figli. Eserciti Frontend 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 Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend 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 «useMemo e useCallback per le prestazioni»?
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 Frontend Academy?
Sì. Ogni lezione Frontend 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
- useContext per lo stato globale
- useReducer per stati complessi
- useMemo e useCallback per le prestazioni
- Custom hook: estrarre logica riutilizzabile