Guide: Sånn migrerer du til React 19

Migreringsguide til React 19, kalendere for frontendere og datahentings-mønstre i ukas ForrigeUke.

Dette var uka for kodekunst og at Tim får kull — og 1040 ting skjedde i frontend-verdenen!

React 19 er ute

Wow. React 19 er ute, og det hele føles antiklimatisk etter å ha snakket om alle de nye funksjonene i så lang tid. Vi har prekt om hvordan React får en rekke nye hooks som kan forenkle ting, og samtidig hvordan frontend dyttes mot serveren, og at vi må lære oss nye måter å gjøre ting på. Nå er versjonen offisielt ute i en stabil form, så nå har vi plutselig muligheten til å bruke det.

Backlogen er alltid lang, men det er vel tid til å komme over til React 19?
Backlogen er alltid lang, men det er vel tid til å komme over til React 19? Vis mer

Istedenfor å gjenta alle de kule, nye funksjonalitetene du kan ta i bruk, skal jeg gjøre noe helt annet. Å migrere over til ny versjon av noe som helst kan være ganske terskel, særlig i en lang liste av andre oppgaver å gjøre. Etter å ha lest oppgraderingsguiden, vil jeg heller oppsummere stegene for deg i fire enkle punkter:

  • Oppgrader versjon i package.json
  • La codemod gjøre jobben for deg
  • Fjern deprecated funksjonalitet
  • Sjekk om applikasjonen kjører

Steg #1: Oppgrader versjon i package.json
Jeg skulle ønske jeg kunne si til deg det bare var å bumpe Reacts versjon til 19, men slik er det oftest ikke.

Raskeste veien for å bytte versjonsnummer i et monorepo. Obs. Ikke gjør dette hjemme.
Raskeste veien for å bytte versjonsnummer i et monorepo. Obs. Ikke gjør dette hjemme. Vis mer

I mitt tilfelle var flere av de andre pakkene i prosjektet avhengig av en viss React versjon. Så etter å ha installert React 19, fikk jeg øye på en rekke pakker som også trenger oppgradering, som TanStack Query*:

Når du vil oppgradere til React 19, ser du raskt at du har en sekk av andre pakker du bør oppgradere
Når du vil oppgradere til React 19, ser du raskt at du har en sekk av andre pakker du bør oppgradere Vis mer

Noen av pakkene hadde ikke noen nyere versjon, og støttet enda ikke React 19. Det er ikke veldig overraskende, siden nyeste versjon kom for bare fem dager siden.

Dermed kan andre pakker være en blokkade for deg som vil over til React 19. Men etter at du har oppgradert avhengighetene dine, eller byttet dem ut med alternativer, kan du gå videre til neste seg.

Steg #2: La codemod gjøre jobben for deg
codemod er et verktøy som tar grovarbeidet ved bytting av kodesnutter, som å bytte fra nå deprecated defaultProps til å heller bruke default-parametere.

Etter å ha kjørt React-codemod-scriptet, skal mange av filene ha blitt omskrevet til støttede skrivemåter.

Når du kjører codemod-scriptet, får du opp alternativer om hvilke under-script du vil kjøre
Når du kjører codemod-scriptet, får du opp alternativer om hvilke under-script du vil kjøre Vis mer

Steg #3: Fjern deprecated funksjonalitet
codemod gjør mye, men fikser ikke all funksjonalitet som er deprecated. Om du kommer fra React 18.3.0, har du nok fjernet funksjonalitet som ikke lenger ville bli støttet i React 19 allerede. Ta likevel en titt på deprecation-notatene om du kjenner igjen noe fra kodebasen din.

Steg #4: Sjekk om applikasjonen kjører
Etter disse endringene, vil applikasjonen kjøre?

Start med npm build for å sjekke etter byggfeil og kjør testene. Om alt er grønt og skjønt, fyr opp applikasjonen også. Om du heller ikke her ser varsler i consolen, vil jeg bare gratulere.

Nå kan du endelig ikke bare lese om all den nye funksjonaliten React 19 gir, men også ta den i bruk!

Kalendere for frontendere

Den lettere og lettere sjokoladekalenderen min sier at jula er rett rundt hjørnet. Det fins mange julekalendere der ute, så jeg vil anbefale noen til deg som er spesielt interessert i frontend.

HTMhell er for deg som vil ha drypp av HTML- tips og triks, som igjen kan hjelpe deg å skrive både universelt utformet kode og lage brukervennlige løsninger. I de første to lukene finner du hvilken alt-tag som er rett for en logo og hvordan du kan bruke “autofocus” i et innloggingsskjema.

Om du også vil style HTML-en du produserer, kan jeg anbefale å ta en titt på cssadventcalendar. Der får du en kort forklaring på en CSS-regel hver dag. Om du har lyst til å doble antall CSS-regler per dag, kan jeg også tipse om at kollega Einar dytter ut daglige CSS-regler i Bekk Christmas. Gårsdagen kunne by på en kul funksjonalitet hvor du kan få scrolling til å skje seksjonsvis.

Om 2025 er året du vil makse lighthouse-scoren på nettsiden din, er det verdt å ta en titt på Web Performance-kalenderen. Der kan du blant annet lese om hvordan JavaScript bare har én hoved-tråd, men likevel håndterer flere oppgaver samtidig.

Datahentings-mønstre

Om du har et vannfall av datahentinger, tipper jeg lighthouse-skåren går ned. Det er noe vi har snakket om tidligere i ForrigeUke, og hvordan rammeverk kan hjelpe på dette.

En måte å unngå vannfall-effekten på, er å ikke gjøre all datahentingen sekvensielt, men vente til alt er klart:

const Post = async ({ postId }: { postId: string }) => {
  const postPromise = getPost(postId);
  const commentsPromise = getComments(postId);

  // 👇 Venter til begge fetch-ene er ferdige
  const [post, comments] = await Promise.all([
    postPromise,
    commentsPromise,
  ]);

Robin Wieruch skriver om hvordan du bør implementere disse datahentings-mønstrene. Ta en titt!

*jammen fikk jeg lurt inn TanStack Query i denne posten også

Det var alt for denne gang. Ha en fin uke!