Styled Components går beast-mode! 💪

ForrigeUke: React Flare, Styled Components v5, filplassering og 10 gode råd for komponenter.

📸: Tomasz Zagórski / Unsplash
📸: Tomasz Zagórski / Unsplash Vis mer

Dette var uken noen tok frontend-utvikling på kornet 🛶, noen andre endelig fant ut av en god bruk for pop-ups 🦅, og noen tredje steppet opp kunst-gamet sitt. 💥

Og 777.600 ting skjedde i React-verdenen!

React Flare tar form 🔥

React-teamet har ikke vært super-aktive på Twitter i det siste, og det er som regel godt nytt for oss som gleder oss til nye features. I forrige uke var React-teammedlem og selvsikkerheten selv Andrew Clark ute og skrøt litt av hvor langt de har kommet:

Den store nyheten i tweeten over er en kommende useEvent -hook — som lar deg forholde deg til events som når musepekeren er over et element, man trykker ned en knapp og mye annet — via hooks. Dette vil gjøre det mye lettere å skrive denne type kode, og forhåpentligvis også føre til endel bedre ytelse i mer avanserte bruksområder.

Ta gjerne en titt på selve pull requestet også — det er en utrolig spennende diskusjon om hva som kommer til å bli mulig. Om det blir noe av da — dette er fortsatt bare et eksperiment fra React-teamets side.

Til slutt kan jeg også anbefale en tur innom denne Reddit-tråden som diskuterer samme tema i litt annen form — ganske interessant lesning det og-

Styled Components går beast-mode! 💪

Det mest populære CSS-in-JS-rammeverket for React, Styled Components, er ute i ny major betaversjon, og de har litt av en skryteliste å vise til!

  • 22 % raskere på klientsiden
  • 45 % raskere på serversiden
  • 31 % mindre kode (nå 12 kb gzipped)

Det er jo ganske imponerende i seg selv, men de gir seg ikke der heller. I tillegg har de skrevet om all sin interne logikk til å bruke hooks, som igjen gjør at de slipper å lage så mange nøstede komponenter. Det kommer du til å merke når du sjekker ut appen din i DevTools!

Ellers er det endel annen snacks å se frem til også, som plugins til CSS-parseren deres. Og best av alt — den eneste breaking changen er at du må ha en nyere versjon av React (16.8) — og der er du vel allerede…. eller?

Les det offisielle blogginnlegget på Medium.

Hvor skal jeg plassere ting? 🤷

Et spørsmål som kommer igjen og igjen er “hvor skal jeg plassere filene mine”. Nå har kjernekaren Kent C. Dodds svart på dette for oss en gang for alle — plasser dem sammen.

Å plassere kode sammen med annen kode som har noe med den koden å gjøre kan være en smart ide. Han bruker eksemplet om kommentarer i koden — selvfølgelig burde de ligge inline. Og det burde HTML-en, CSS-en og utility-funksjonene dine også.

En spenstig artikkel som gjør en god jobb med å overbevise deg om å lage færre filer, og heller refaktorere litt når det trengs.

Tenk i effekter!

Nå som hooks er blant oss, er det på tide å drite litt i disse gamle livssyklusene. Vi har droppa helt å lære dem vekk i de workshopene vi holder i Bekk. Og det betyr at det er på tide å begynne å tenke i effekter.

Sebastian De Deyne har skrevet en artikkel som tar oss med på en liten refaktoreringsjobb i en tenkt chatte-app — hvordan kan man slutte å tenke i livssyklusmetoder, og heller tenke i sideeffekter?

Shameless plug: De 10 bud

Megatalent og blidfis Caroline Odden og meg selv holdt nylig en presentasjon om hva vi mente var 10 gode råd for å lage brukervennlige komponenter. I forrige uke kom også en skriftlig versjon.