I den hektiske julemåneden ble React 19 lanser. Det er selvfølgelig en big deal i frontend-verden og tar dermed mye plass i månedens høydepunkter.
React 19 er altså ute. Hva innebærer det egentlig?
React 19 introduserer flere spennende funksjoner som forbedrer utvikleropplevelsen og ytelsen:
📝 Actions – smartere skjemahåndtering Glem onSubmit! Nå kan du bruke action-funksjoner til å håndtere skjemainnsendinger både på klienten og serveren. Mer fleksibelt og mye enklere! 🙌
🔄 Nytt use-API – enklere async Det nye use-API-et lar deg hente data fra en promise eller context på en smooth måte, spesielt sammen med Suspense. Bye-bye spagettikode! 🍝⚡
🌐 React Server Components – raskere og bedre Nå er serverkomponentene endelig stabile! La serveren ta seg av tunge komponenter for raskere innlasting og bedre SEO. Win-win! 🚀📈
🛠️ Støtte for Web Components React 19 spiller nå på lag med web components! Lag dine egne HTML-elementer og integrer dem sømløst med andre rammeverk. Full kontroll! 🔥
Som alltid kan migrering til en ny hovedversjon være utfordrende. Heldigvis tilbyr React-teamet verktøy som Codemod, som automatisk kan oppdatere komponentene dine til å følge konvensjonene i den nye versjonen.
React Router v7 ble lansert
Sammen med React 19 har React Router v7 blitt lansert, med betydelige endringer som fortjener oppmerksomhet:
🔄 Forenklet API Navigasjonen er nå mye enklere! V7 har fått et mer intuitivt og ryddig API, så du slipper å rote med komplisert rutehåndtering. Mer flyt, mindre frustrasjon! 😎
⚡ Bedre støtte for asynkrone operasjoner Datahenting går som en lek! Nå håndterer React Router asynkrone kall smartere, så sidene dine laster raskere og føles enda mer responsive. 🚀
📦 Automatisk kode-splitting Slutt på å laste hele appen på én gang! V7 deler automatisk opp koden og laster inn det som trengs når det trengs. Smidig og lynraskt! ⚡
🤝 Tight integrasjon med React 19 Den nye versjonen sørger naturligvis for å spille bra på lag med React 19. Med støtte for serverkomponenter og det nye use-API-et får du en sømløs og moderne utvikleropplevelse. 🛠️✨
text-box-trim, text-edge og text-box
Har du lagt merke til at Figma-skissene ofte ser bedre ut enn det endelige resultatet, selv om du legger inn nøyaktig de samme verdiene som i Figma? Små inkonsekvenser i spacing er ofte årsaken. Dette kan være vanskelig å oppdage, men man merker at noe ikke stemmer helt.
CSS resets brukes ofte for å gjøre det enklere, blant annet for å sikre at ulike overskrifter og tekst-elementer ikke legger på forskjellige line heights, som kan føre til at spacing mellom elementene over og under ikke samsvarer helt med resten.
De nye verktøyene text-box-trim, text-edge og text-box er designet for å løse disse problemene: • text-box-trim: Fjerner overflødig whitespace rundt tekstinnhold, noe som gir mer presis kontroll over layout og spacing. • text-edge: Gir mulighet til å justere tekstens kantlinjer, slik at de samsvarer bedre med designspesifikasjonene fra verktøy som Figma. • text-box: Lar deg definere en boksmodell for tekst, som gjør det enklere å håndtere spacing og alignment på en konsistent måte.
Disse verktøyene er ment å gjøre livet enklere for utviklere ved å redusere avvik mellom design og implementasjon, og sikre at layout er mer konsistent.
Next.js 15.1
Når React kommer med ny versjon så er heldigvis Nextjs på ballen med oppdateringer for å støtte den. Man skulle nesten tro at Meta og Vercel snakker sammen 👏
I tillegg kan den nye versjonen vise til: 🛠️ Bedre error debugging Feilmeldinger er nå mye tydeligere! Next.js 15.1 gir deg mer presise og forståelige feilmeldinger både i nettleseren og terminalen. Det betyr mindre leting etter bugs og raskere fiksing. 🙌
🔍 ESLint 9-integrasjon Next.js har nå støtte for ESLint 9, som hjelper deg å skrive bedre kode med de nyeste reglene og forbedringene. Kort sagt: ryddigere kode og færre feil! 😎
🎨 Eksperimentell støtte for inline CSS Nå kan du teste ut inline CSS, hvor stilene blir lagt rett inn i HTML-en. Dette kan gi raskere lasting av sidene dine – perfekt for deg som liker å leke med ytelse og design. 🚀
Robin Wieruch lærer deg bedre data fetching
Det er mange fallgruver å gå i når det kommer til data fetching. Det er en essensiell del av de fleste applikasjoner, og om man skal hente data fra flere endepunkter så er det lett for at det andre kallet venter på at det første skal bli ferdig, selv når det egentlig ikke er nødvendig. Det fører til lengre lastetider som naturligvis har negativ innvirkning på brukeropplevelsen, og vi opplever økt bounce rate. Not good.
Robin Wieruch viser i denne nydelige posten hvordan man kan gjøre data fetching riktig.
State of JS 2024: Nye trender i frontend-verdenen
State of JS 2024-undersøkelsen ble publisert i desember og gir oss innsikt i de nyeste trendene innen JavaScript og frontend-utvikling. React beholder sin dominerende posisjon med 82% bruk, men rammeverk som Angular og Svelte viser økende popularitet. Bruken av Angular økte fra 45% til 50% fra 2023 til 2024, mens Svelte nå brukes av 26% av utviklerne. 
Når det gjelder meta-rammeverk, er Next.js fortsatt ledende, selv om bruken har gått ned fra 56% i 2023 til 54% i år. Astro fortsetter å vokse raskt og har nå gått forbi Nuxt som det nest mest populære meta-rammeverket, med 23% bruk. 
Undersøkelsen avdekker også at mangelen på statisk typing er en av de største utfordringene med JavaScript, noe som kan forklare hvorfor 67% av respondentene nå skriver mer TypeScript-kode enn ren JavaScript. 
For de som utvikler mobilapper, er React Native og Electron de mest populære valgene, med henholdsvis 35% og 34% bruk. Andelen utviklere som lager native-apper har sunket fra 28% til 16%. 
Når det gjelder byggeverktøy, fortsetter Vite å vokse og brukes nå av 78% av utviklerne, og nærmer seg dermed webpack i popularitet. 
Flere høydepunkter med grafer kan du lese hos Kode24
Da kan vi sette strek over 2024 og se fremover mot det som ligger an til å bli et turbulent og spennende 2025!