Quando usare React memo, useMemo e useCallback, con il conteggio dei render dal vivo. Più forwardRef e ref come prop in React 19, modali con createPortal, label con useId e una lista virtuale da 10,000 righe.
Avvolgi un componente in memo per saltare i render quando le sue props non cambiano. Usa useCallback per mantenere identica una funzione passata come prop tra un render e l'altro, e useMemo per mettere in cache un oggetto o un calcolo lento. Contano solo insieme a memo o a un costo reale. Misura prima con il React Profiler; i contatori dal vivo qui sotto mostrano la differenza.
Una riga ciascuno
Le demo contano i render reali nel tuo browser. Scrivi in ogni casella con l'interruttore spento e acceso, e guarda i contatori. La seconda metà copre le API di riferimento che compaiono accanto al lavoro sulle prestazioni: ref, portal e id.
useMemo chiama la tua funzione e mette in cache il valore che restituisce. useCallback mette in cache la funzione stessa. useCallback(fn, deps) equivale a useMemo(() => fn, deps).
No. Anche confrontare le props costa tempo, e la maggior parte dei render è economica. Usa memo dove il Profiler mostra un componente che fa spesso il render con le stesse props e impiega un tempo apprezzabile.
In React 19 i function component accettano ref come una normale prop, quindi il nuovo codice non ha bisogno di forwardRef. Funziona ancora, e il team di React ha detto che sarà deprecato in una versione futura.
Una modale dentro una card con overflow hidden o un transform può essere tagliata o finire sotto altri contenuti. Farne il render in document.body con createPortal evita entrambi i problemi mantenendola nel tuo albero React.
No. useId serve per attributi di accessibilità come htmlFor e aria-describedby. Le key dovrebbero venire dai tuoi dati, come un id del database.
Quale strumento per quale problema
Scrivi nella casella. Senza memo, la lista rifà il render a ogni tasto anche se le sue props non sono cambiate. Con memo fa il render una volta sola.
Passare una arrow function inline rompe memo, perché a ogni render viene creata una nuova funzione. useCallback restituisce la stessa finché le sue dipendenze non cambiano.
Filtrare 20,000 prodotti a ogni render è lavoro sprecato quando è cambiato solo un valore non correlato. useMemo riesegue il filtro solo quando cambiano products o query.
Un genitore non può passare ref a un function component a meno che il componente non lo inoltri. forwardRef passa il ref a un elemento reale.
Da React 19 i function component ricevono ref come qualsiasi altra prop, quindi forwardRef non serve più nel nuovo codice.
Un portal fa il render dei children in un altro nodo del DOM, di solito document.body, così una modale sfugge ai genitori con overflow hidden o con uno z-index basso. Gli eventi React risalgono comunque attraverso l'albero React.
useId fornisce un id univoco che coincide tra il render sul server e quello nel browser, così più copie dello stesso componente campo non entrano mai in conflitto.
List fa il render solo delle righe visibili più qualcuna in più. Ogni riga riceve index e style; style posiziona la riga e va applicato. La demo accanto usa la stessa idea, scritta a mano.
Stai costruendo dei form? useId si abbina bene a
Lista renderizzata {n} volte ({count} elementi)
Avvolgi la lista in memo
Scrivi qui
({n} render)
Usa useCallback
Piccola
Media
Grande
Scelta: {x}
Metti in cache con useMemo
Filtra i prodotti
Clic non correlato ({n})
{matches} su 20,000 corrispondono. Il filtro è stato eseguito {runs} volte; l'ultima esecuzione ha richiesto {ms} ms.
Cerca
Metti il focus sulla ricerca
Questo box ha overflow hidden, eppure la modale copre l'intera finestra.
Apri la modale
Demo del portal
Sono stato renderizzato in document.body con createPortal.
Chiudi
Rispondiamo entro un giorno.
Email (di nuovo)
Stesso componente, id diverso.
10,000 clienti
Cliente {n}
10,000 righe, ma solo {n} sono nel DOM in questo momento.
Inizia gratis · Nessuna carta di credito richiesta