Denne uken går den store React-konferansen React Conf av stabelen, med en masse spennende nyheter for alle som driver frontendutvikling med React. Det ventes at mye av det som blir vist under React Conf vil finne veien inn i Next.js, og noe vi vil få høre mer på neste ukes Vercel Ship-konferanse.
En av de aller største nyhetene fra første dag på React Conf, er at React Compiler (tidligere "React Forget") nå er lansert, som åpen kildekode.
React Compiler shipped 🚢 #ReactConf pic.twitter.com/TtTQWUpAfI
— Michał Pierzchała (@thymikee) May 15, 2024
Med React Compiler vil det bli helt slutt på å måtte bruke ting som useMemo, useCallback og andre triks for å optimalisere ytelsen til React-applikasjonene dine.
– React Compiler er den mest avanserte kompilatoren i frontend-rammeverk-verdenen, sier YouTube-profil Jack Herrington.
– React endret seg akkurat for alltid! sier hans YouTube-kollega Theo.
Krever React 19
React Compiler er foreløpig ikke klar for produksjon, og en eksperimentell kompilator som automatisk vil optimalisere React-koden din.
Kompilatoren krever React versjon 19, som også ble lansert i en Release Candidate (RC)-versjon i går.
Måten React Compiler fungerer på er ifølge dokumentasjonen at den kan forstå både JavaScript og "The Rules of React". Dermed kan den identifisere hvor i koden din det er rom for forbedringer, for eksempel der hvor du tidligere ville ha brukt useMemo, useCallback eller React.memo for å forhindre unødvendige re-rendringer.
Nå trenger du ikke lenger å gjøre slike optimaliseringer manuelt, men la React Compiler fikse det for deg.
For de som bruker Next.js ser det ut til at React Compiler snart vil kunne skrus på via et flagg. Vercel-sjef Guillermo Rauch tweetet nemlig dette:
React Compiler soon on @nextjs: https://t.co/N2c2aESsJv pic.twitter.com/ucbddlKo39
— Guillermo Rauch (@rauchg) May 15, 2024
Vi får helt sikkert vite mer om dette på Vercel Ship neste uke.
Eslint-plugin viser deg optimaliseringene
Sammen med React Compiler ble det også lanserte en ESLint-plugin som vil vise deg hvor i koden kompilatoren vil gjøre optimaliseringer.
Denne pluginen kan brukes uavhengig av React Compiler. Dermed kan de som ønsker å vente med å ta i bruk React Compiler automatisk få hjelp med å optimalisere koden sin manuelt på "gamlemåten" med for eksempel useMemo. Eller hoppe i det, og skru på React Compiler.
Jack Herrington har laget en gjennomgang av hvordan React Compiler fungerer:
Eller du kan se presentasjonen fra React Conf her: