De React Compiler, is een build-time tool ontworpen om React-applicaties automatisch te optimaliseren door memoization af te handelen en onnodige re-renders te verminderen. Deze compiler, voorheen bekend als React Forget, werd voor het eerst geïntroduceerd op React Conf in 2021.
Wat doet het precies?
De belangrijkste functie van de React Compiler is het automatiseren van het memoization-proces in React-toepassingen. Memoïsatie is een optimalisatietechniek waarbij de resultaten van dure functieaanroepen in de cache worden geplaatst, zodat volgende aanroepen met dezelfde argumenten het resultaat in de cache kunnen retourneren, waardoor de prestaties verbeteren. React biedt haken zoals gebruikMemo, useCallbacken hogere orde componenten zoals React.memo om memoïsatie handmatig uit te voeren. Deze handmatige methoden kunnen echter foutgevoelig en lastig te onderhouden zijn. Vooral als je onnodige rerenders van kindcomponenten wilt voorkomen. De React Compiler pakt dit aan door de code automatisch te analyseren en waar nodig memoization toe te passen, zodat componenten alleen opnieuw worden weergegeven als hun invoer verandert.
Hoe gebruik je het vandaag?
Volg deze stappen om de React Compiler te integreren in your project:
Compatibiliteit controleren: Vóór de installatie is het raadzaam om te beoordelen of your codebase compatibel is met de React Compiler. Voer het volgende commando uit:
npx react-compiler-healthcheck@laatste
of, als je garen gebruikt:
garen dlx react-compiler-healthcheck@laatste
Dit script evalueert hoeveel componenten in your project kunnen worden geoptimaliseerd door de compiler en controleert op incompatibele bibliotheken.
De uitvoer ziet er als volgt uit:
46 van de 52 componenten met succes gecompileerd.
StrictMode gebruik gevonden.
Geen gebruik van incompatibele bibliotheken gevonden.
De compiler en ESLint-plugin installeren: Als your project compatibel is, ga dan verder met het installeren van de React Compiler en de bijbehorende ESLint-plugin:
npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
of, als je garen gebruikt:
yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
De ESLint-plugin biedt realtime feedback in your code-editor, waarbij gebieden worden gemarkeerd waar de optimalisaties van de compiler van toepassing zijn.
Het controleert voornamelijk of your code de de regels van React schendt.
De volgende stap, als je Vite gebruikt, is het bijwerken van de configuratie van de React-plugin:
const ReactCompilerConfig = {
/* In mijn geval heb ik dit leeg gelaten */
};
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react({
babel: {
plugins: [[“babel-plugin-react-compiler”, ReactCompilerConfig]]
}
}),
// …
],
});
Hoe test je of het werkt?
Als je de React developer tools plugin gebruikt voor de your browser en je inspecteert de your componentenboom, dan zie je dat de meeste componenten nu een [ Memo ✨ ] markering hebben.
|
Zonder de React Compiler:
|
Met de React Compiler:
|
Voordelen
Ik hoopte dat de React compiler mijn applicatie sneller zou maken. Niet dat het traag was, maar langdurig gebruik (als een mobiel PWA-spel) was behoorlijk belastend voor de batterij.
Nadat ik de React compiler had ingeschakeld, heb ik de rendertijd gemeten in de profiler, en de rendertijd was gehalveerd! Hoewel de compiler nog in bèta is, zijn de voordelen echt merkbaar.
Rendertijd zonder React Compiler:
Rendertijd met React Compiler:
Hetzelfde aantal acties kostte 3,6 ms rendertijd, terwijl het 7,3 ms was zonder de compiler.
En het mooie is dat al deze memoïsaties geen deel uitmaken van de codebase, waardoor de code leesbaar blijft en gefocust op features. Al deze memoïsaties hebben de bundler iets groter gemaakt (ongeveer 20k), maar dat was een kleine prijs voor de prestatiewinst.
Ik vind de compiler een groot succes en ik ben erg benieuwd welke optimalisaties er nog meer in de compiler komen. De bèta tot nu toe was geweldig!
