Wanneer u React memo, useMemo en useCallback gebruikt, met live rendertellingen. Plus forwardRef en ref als prop in React 19, modals met createPortal, labels met useId en een virtuele lijst van 10,000 rijen.
Wikkel een component in memo om renders over te slaan als de props niet veranderd zijn. Gebruik useCallback om een functie-prop tussen renders gelijk te houden, en useMemo om een object of een trage berekening te cachen. Ze doen er alleen toe in combinatie met memo of bij echte kosten. Meet eerst met de React Profiler; de live tellers hieronder laten het verschil zien.
Elk in één regel
De demo's tellen echte renders in uw browser. Typ in elk vak met de schakelaar uit en aan, en kijk naar de tellers. De tweede helft behandelt de referentie-API's die naast performancewerk opduiken: refs, portals en ids.
useMemo roept uw functie aan en cachet de waarde die ze teruggeeft. useCallback cachet de functie zelf. useCallback(fn, deps) is hetzelfde als useMemo(() => fn, deps).
Nee. Props vergelijken kost ook tijd, en de meeste renders zijn goedkoop. Gebruik memo waar de Profiler een component laat zien die vaak met dezelfde props rendert en merkbaar tijd kost.
In React 19 accepteren functiecomponenten ref als gewone prop, dus nieuwe code heeft forwardRef niet nodig. Het werkt nog steeds, en het React-team heeft gezegd dat het in een toekomstige release deprecated wordt.
Een modal binnen een kaart met overflow hidden of een transform kan worden afgekapt of onder andere content belanden. Hem met createPortal in document.body renderen voorkomt beide, terwijl hij in uw React-boom blijft.
Nee. useId is bedoeld voor toegankelijkheidsattributen zoals htmlFor en aria-describedby. Keys moeten uit uw data komen, zoals een database-id.
Welk hulpmiddel voor welk probleem
Typ in het vak. Zonder memo rendert de lijst bij elke toets opnieuw, hoewel de props niet veranderd zijn. Met memo rendert hij één keer.
Een inline arrow-functie doorgeven breekt memo, omdat er elke render een nieuwe functie wordt gemaakt. useCallback geeft dezelfde terug tot de dependencies veranderen.
Bij elke render 20,000 producten filteren is verspild werk als alleen een ongerelateerde waarde veranderde. useMemo voert het filter alleen opnieuw uit als products of query verandert.
Een parent kan geen ref aan een functiecomponent doorgeven tenzij de component hem doorstuurt. forwardRef geeft de ref door aan een echt element.
Vanaf React 19 ontvangen functiecomponenten ref zoals elke andere prop, dus forwardRef is in nieuwe code niet meer nodig.
Een portal rendert children in een andere DOM-node, meestal document.body, zodat een modal ontsnapt aan parents met overflow hidden of een lage z-index. React-events bubbelen nog steeds door de React-boom.
useId geeft een unieke id die gelijk is tussen de render op de server en in de browser, zodat meerdere kopieën van dezelfde veldcomponent nooit botsen.
List rendert alleen de rijen in beeld plus een paar extra. Elke rij krijgt index en style; style positioneert de rij en moet worden toegepast. De demo ernaast gebruikt hetzelfde idee, met de hand geschreven.
Bouwt u formulieren? useId gaat goed samen met
Lijst {n} keer gerenderd ({count} items)
Wikkel de lijst in memo
Typ hier
({n} renders)
useCallback gebruiken
Klein
Middel
Groot
Gekozen: {x}
Cachen met useMemo
Producten filteren
Ongerelateerde klik ({n})
{matches} van de 20,000 komen overeen. Het filter liep {runs} keer; de laatste run duurde {ms} ms.
Zoeken
Focus op zoeken
Dit vak heeft overflow hidden, toch bedekt de modal het hele venster.
Modal openen
Portal-demo
Ik ben met createPortal in document.body gerenderd.
Sluiten
We antwoorden binnen een dag.
E-mail (nogmaals)
Zelfde component, andere id.
10,000 klanten
Klant {n}
10,000 rijen, maar er staan er nu maar {n} in de DOM.
Gratis beginnen · Geen creditcard nodig