Dag 5 van het leren van React: Batching en Functionele Updates
Ik dacht dat het meerdere keren aanroepen van een state setter voor meerdere renders zorgde.
Ik zat ernaast.
React is slimmer dan dat. Het gebruikt een proces genaamd Automatic Batching.
In plaats van na elke individuele update te renderen, groepeert React deze. Het verzamelt alle updates en voert één enkele render uit. Dit bespaart performance.
Dit is wat ik vandaag heb geleerd.
Het Batching-proces Wanneer je meerdere state-functies aanroept, volgt React deze flow:
- Meerdere state-updates vinden plaats.
- React batcht deze samen.
- React voert één render uit.
- React commit de wijzigingen naar de UI.
Het probleem met standaard updates Ik probeerde deze code: setCount(count + 1); setCount(count + 1); setCount(count + 1);
Ik verwachtte dat de count van 0 naar 3 zou gaan. Het ging van 0 naar 1.
Dit gebeurt omdat setCount(count + 1) niet betekent "verhoog de count". Het betekent "zet de count op deze specifieke waarde".
Als count 0 is, vertelt elke regel React om de count op 1 te zetten. React batcht deze en ziet dat de laatste instructie is om de count op 1 te zetten.
De oplossing: Functionele Updates Om dit op te lossen, moet je een functionele update gebruiken. Deze gebruikt de meest recente state die beschikbaar is in de update queue.
De juiste manier: setCount((prev) => prev + 1);
Wanneer je dit patroon gebruikt, geeft React elke update de meest recente waarde.
- Eerste update: 0 + 1 = 1
- Tweede update: 1 + 1 = 2
- Derde update: 2 + 1 = 3
Nu bereikt de teller daadwerkelijk 3.
Een veelgemaakte fout Ik schreef ooit: setCount((prev) => { prev + 1 });
De teller werd undefined. Wanneer je accolades gebruikt in een arrow function, moet je het return-keyword gebruiken. Gebruik in plaats daarvan dit: setCount((prev) => prev + 1);
Belangrijkste leerpunten:
- React batcht meerdere state-updates om de snelheid te verbeteren.
- setState-aanroepen triggeren niet altijd onmiddellijke renders.
- Standaard updates gebruiken de waarde uit de huidige render-cyclus.
- Functionele updates gebruiken de meest recente state uit de update queue.
- React gebruikt een interne Update Queue om deze wijzigingen te beheren.