Dette var uka for perfekt lighthouse-score, 500 måter å laste inn siden på og tvilsomme features — og 197 andre ting som skjedde i frontend-verdenen!
Overgang til React 18
Det er 3 måneder siden React 19 ble sluppet, og det er lett å la seg rive med av nye, gøye funksjoner som server-actions og useOptimistic — selv om det enda er i beta. Men det er flere av oss som fortsatt sitter på eldre React-versjoner.
Bare nå på fredag jublet teamet mitt da vi endelig pusha PR-en som fikk oss over på React 18. Da var det bare å dra frem popkornet og lese seg opp på release notes fra 2 år tilbake.
En betydelig endring i React 18 er konseptet “concurrent”, som handler om at rendringen blir brutt opp i flere biter, så du kan prioritere hvilke deler som rendres først. Dette gir en mer responsiv opplevelse for brukeren. Noe av dette foregår automagisk, mens andre ting kontrollerer du med nye hooks, som useTransition.
«Som ved de fleste migreringer, oppstod det noen uventede utfordringer.»
Dette var en av motivasjonene for at New York Times nå migrerte over til React 18. Med millioner av besøkende på nettsiden, er dette en gjeng som er over gjennomsnittet opptatt av SEO og ytelse. De håpte også automatisk batching av state-oppdateringer og server-komponenter kunne øke ytelsen.
Men som ved de fleste migreringer, oppstod det noen uventede utfordringer. React 18 er strengere ved hydrering enn tidligere versjoner, noe som skapte trøbbel for de tusenvis av grafene og kartene de har på sidene.
Her kan du lese hvordan de løste hydreringsproblemet.
Wordpress forbereder seg til React 19
Migrasjoner er i vinden, for selv til Wordpress (!) har det kommet en migrasjonsguide — mange plugins og temaer er nemlig bygd i React.
Fra Wordpress versjon 6.6 brukes React 18.3, og denne versjonen vil advare deg om kode som ikke lenger blir støttet i React 19.
I tillegg til å være en fin migrasjonsguide, er det også et artig blikk på fortiden. Som fersk React-utvikler husker jeg enda hvordan jeg argumenterte for å beholde propTypes i stedet for å bytte til TypeScript. Det eldret ikke veldig godt — for nå skal propTypes fjernes i React 19, sammen med en del andre ting:
Les mer her: Preparing for React 19: a guide for WordPress 6.6 users
Hvorfor bryr vi oss om ytelse?
Med så mye blod, svette og tårer brukt på migrasjoner, er det viktig å ta et godt steg tilbake, se på det store bildet og reflektere over hvorfor vi legger ned så mye tid i dette: Bedre SEO-score.
Neida. Eller, delvis riktig hvert fall. Googles score er jo et resultat av metrikker som påvirker brukeren, som treg innlastning eller innhold som flytter på seg. Dårlige sider er dårlig for brukerne våre, og skaper friksjon i en allerede stressende hverdag.
Det finnes mange måter å måle ytelse på, og nå har SpeedCurve laget en grundig oversikt. Her kan du lese om hvordan du kan skape en kultur som bryr seg om ytelse, og hvordan du kan forbedre de 3 viktigste metrikkene for bedre Google-score. Etter jeg kjørte forrige ukes Lighthouse-test, er jeg særlig motivert til å forbedre Largest Contentful Paint.
Ta en titt: Web Performance Guide
Det var alt for denne gang. Ha en super uke!
