Styled-components er død – Sanity gir den nytt liv
– Ikke bruk det til nye prosjekter, sa styled-components-skaperen før sommeren. Da måtte norske Sanity ta grep.
CSS-in-JS-biblioteket styled-components har vært ett av de mest brukte CCC-bibliotekene i mange år, og det brukes fortsatt av 23 prosent av de som svarte på årets State of CSS-undersøkelse.
Før sommeren skrev imidlertid Evan Jacobs, som vedlikeholder biblioteket, at prosjektet nå er i "maintenance mode".
– For nye prosjekter ville ikke anbefalt å bruke styled-components eller de fleste andre css-in-js-løsninger, skriver Jacobs.
Nå har norske Sanity forket styled-components og laget en fiks som løser en del problemer for alle de som fortsatt bruker biblioteket, blant annet når det gjelder ytelse.
Fungerer dårlig med moderne React
Jacobs oppgir flere grunner til at han ikke lenger anbefaler sitt eget bibliotek, styled-components.
Han bruker selv ikke lenger styled-components i produksjon, selv om han har vedlikeholdt biblioteket siden 2018.
- Den viktigste årsaken til at styled-components ikke lenger vil bli bli videreutviklet (bare vedlikeholdt) er imidlertid endringer i React.
- Kort fortalt fungerer styled-components dårlig sammen med React Server Components. Og velger man å bruke det likevel, så vil man kunne oppleve dårligere ytelse.
- Årsaken til den dårlige ytelsen er at styled-components aldri har tatt i bruk useInsertionEffect-hooken som kom i React 18. Denne er laget spesifikt for å løse ytelsesproblemer med CSS-in-JS-løsninger.
Sanity forket og fikset det
Sanity bruker selv fortsatt styled-components i sine produkter, og oppgir det som årsaken til at de forket og endret prosjektet for å gjøre biblioteket mer bruktbart.
Resultatet er styled-components-last-resort – en variant av styled-components som skal gi bedre ytelse. Biblioteket er publisert under en MIT-lisens.
– React-appen din kan være 40 prosent tregere på første render enn den trenger å være. Ikke fordi du skrev dårlig kode eller at React er treg, skriver Knut Melvær og Cody Olsen i et blogginnlegg.
Cody Olsen sendte opprinnelig inn en PR med React 18-optimaliseringer i juli 2024, men den ble aldri implementert før styled-components gikk i vedlikeholdsmodus.
– Så Cody gjorde det flinke utviklere gjør. Han gjorde vår PR om til en fork, optimaliserte ytterligere, og åpnet den opp for alle, skriver Knut Melvær i et LinkedIn-innlegg.
Ifølge Sanity skal selskapet Linear ha testet Sanity-fiksen, og oppnådd 40 prosent raskere førstegangs rendring av React-komponenter.
Vi migrerer aktivt vekk fra styled-components selv.
Midlertidig løsning
Som navnet antyder er ikke styled-components-last-resort ment som en varig løsning. men som en løsning man kan bruke midlertidig mens man jobber med å komme seg over på noe annet.
I tillegg til å ta i bruk useInsertionEffect har Sanity også gjort enkelte andre endringer for å forbedre ytelse. Du kan lese flere detaljer her.
Sanity understreker at de lagde denne fiksen utelukkende for å gi de som bruker styled-components bedre tid til å finne noe annet:
– Vi er ikke de nye vedlikeholderne. Vi legger ikke til ny funksjonalitet. Vi migrerer aktivt vekk fra styled-components selv.
