ForrigeUke (Uke 17, 2025)

<ForrigeUke uke=”17” år=”2025” />

Dette var uken for backpacking 🎒 og formattering av tall 🔢 — og 7 040 ting skjedde i frontend-verdenen.

Ny blogg 🎉

Nå er vi altså på plass, på en helt flunkende ny blogg-platform og plass. Du vil finne de nyeste utgavene av <ForrigeUke/> her på bekk.no/fag.

Double-trouble fra React ⚛️

Det er ikke så alt for ofte vi hører fra React-teamet, men i uken som gikk kom det ikke bare en, men to oppdateringer fra den kanten.

React Compiler

Den første nyheten er at React Compileren er gått over til release-kandidat, som i praksis betyr at den er klar for å sånn smått prøves ut!

En av de vanskeligste tingene med React er å ha kontroll på når komponenter gjør (utilsiktede) rerenderinger. Med useMemo og useCallback har man prøvd å bøte på dette. Begge hookene har vært både kompleks å skjønne seg på, og å skjønne helt når man skal ta i bruk. Med den nye React compileren vil den analysere koden og automatisk memoisere deler av koden – Og dermed unngår du automatisk redusere unødvendige oppdateringer.

En annen bonus er at de har tatt en titt på useEffect-hooken, og sett at mye av kompleksiteten ligger i vanskeligheter med avhengigheter dependency-arrayet. Med den nye compileren vil det ikke lengre være behov for å spesifisere dette selv. Det er også påbegynt arbeid med en IDE-extension for compileren som viser hvilke avhengigheter som blir automatisk puttet inn.

Activity og View transitions

Det dukket også opp en annonsering av to nye API-er som dukker opp i neste eksperimentelle versjon av React, altså ikke helt klart for prod enda! 🤠

Det første er ViewTransition, som skal gjøre det såre enkelt å lage fine animerte overganger mellom sider, eller Transitions i React. API-et lar det peke på nøyaktig hvilke komponenter som skal animeres ved sideskift. Selve animasjonen definerer du med CSS.

Activity er en komponent som lar deg skjule komponenter, ikke alt for ulikt det å sette en display:none eller skjule komponenenten med conditional rendering (&&). Problemet Activity løser er at display:none bare skjuler komponenten visuelt, mens conditional rendering fjerner hele komponenten (og tilstanden).
Den nye Activity derimot gir muligheten til å skjule komponenten, bevarer tilstanden og nedprioriterer det å kjøre koden for det som er wrappet i Activity. 😴

Du kan lese mer, og se interaktive eksempler på begge API-ene i denne blogposten.

Optimisk oppdateringer i React-Query

Forfatteren bak biblioteket ReactQuery (som jeg er veldig fan av 🙏) fortsetter sin artikkelserie, og denne gangen bryter han ned hvordan man håndterer optimistiske (lokale) oppdateringer av tilstander for å forbedre brukeropplevelsen – Og enda vanskeligere; hva skjer når man var for optimistisk og noe gikk galt.

For det er virkelig ikke rett frem, spesielt når det kan være flere steder som muterer samme tilstand, samtidig 😵‍💫. I denne blogposten forklares det både med kode og kode visuelle eksempler hvordan man løser dette med bruk av useMutation og onSettled på best mulige måte. 👌

End of life for Node 18 💀

I uken som gikk var det også på tide å pensjonere Node v18. Det betyr at det ikke lengre vil komme oppdateringer, sikkerhetsoppdateringer inkludert. til denne versjonen lengre.

I praksis betyr det at det er absolutt anbefalt å gjøre en vårrengjøring på prosjektet og ta i bruk en nyere versjon som v20, eller aller helst v22 som er long-term-support. Du finner oversikten 👉 her 👈.

En enkel måte å sjonglere på node-versjonene på din egne maskin er å ta i bruk NVM, og for å tvinge prosjektet til å bruke nyere node-versjoner kan det være lurt å legge til en engines-property i package.json din!

Aaand that’s that! 👋 Vi sees neste uke!