Prøv owner tree i DevTools 🌲

forrigeUke:optimaliser koden din med to nye hooks, React Fiber og er React fortsatt relevant i 2019?

📸: Hoang på Unsplash
📸: Hoang på Unsplash Vis mer

Ferien er for mange igang ☀️ og det tynnes ut med folk både i storbygatene og på kontorene. Parkene, strendene og kiosken som selger is er plassene som nå fylles opp av glade nordmenn - klare for litt sol og farge. 🔥 Selv om Norge tar ferie gjelder ikke det React-miljøet, så la oss se hva som skjedde forrige uke.

Fot i bakken 👣

Frontend-verden er i stadig endring, og nye rammeverk og økosystem dukker opp hyppigere enn før. Det kan derfor være nyttig å ta en fot i bakken iblant å se litt hvordan og kanskje hvorfor man skal velge React –– ihvertfall om det kanskje er noe du vurderer å lære deg. Er det fortsatt relevant i 2019 eller burde man heller lære seg andre rammeverk som Vue.js?

“React in 2019: Is it still worth jumping the bandwagon?” gir kanskje ikke et klart svar, men den gir deg i alle fall noen fordeler og ulemper og noe å vurdere før du hopper på bølgen.

Totaalt uten bias er jo svaret fra artikkelen over at: Ja, React er fortsatt relevant! 😄Puh!

Optimize all the code! 🚀

Hooks er jo veldig i vinden i React-miljøet og mange har begynt å ta dette flittig i bruk. To hooks, useMemo og useCallback, kan brukes til å optimalisere React-koden og kanskje gjøre applikasjonen din mer effektiv. Denne artikkelen går grundig inn på hva disse hooksa er og hvordan de kan brukes for å bruke mindre tid på krevende operasjoner.

Man kan ofte tro at en komponent ikke blir re-rendret fordi props den får inn ikke har endret- eller skal endre verdi. Faktum er derimot at mange komponenter blir unødig re-rendret fordi foreldrekomponenten faktisk lager et helt nytt objekt for hver render. Kent C. Dodds går inn på hvordan man kan optimalisere re-rendring av komponenter helt uten React.pure, PureComponent eller shouldComponentUpdate.

Mr. Dodds har absolutt ikke tatt ferie og har nå også kommet med et kurs som går i dybden på hvordan man skriver om klassekomponenter til funksjonskomponenter med hooks.

Smoosh 🤗

Om du har ferie har du kanskje tid til å se denne (nesten) 2 timer lange videoen om React Fiber.

«The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures.»

React Fiber hjelper med rendering av komponenttreet og gir mulighet for å stoppe render, hoppe videre i renderingen, unngå å rendre en komponent unødvendig og liknende.

I denne videoen er målet å “fjerne” alle divs og lage en side uten å måtte ha mange divs kun for gruppering av elementer. Dette kaller de “SmooshMode” — en referanse til “Smoosh Gate” fra tidligere i år.

Dersom du er godt vant med React.Fragment ville jeg anbefalt å hoppe rett til 19:10. Her går Dan Abramov inn i React Fiber og forklarer godt hvordan rendering av komponenttreet foregår og viser også litt av koden og strukturen på kodebasen. Videre viser han hvordan han endrer elementene for å fjerne de fra treet på samme måte som Fragments dersom det er en div inni < SmooshMode />.

Mot slutten “Smoosher” han også Twitter! Her hacker han Twitter for å få tilgang til React i konsollet og fjerner alle div’ene i Twitters DOM. Ganske kult!

Vis mer

Owner tree 🌲

Jeg hadde ikke hørt om “owner tree” som lages av DevTools før jeg snublet over tweeten fra Brian Vaughn.

Owner er i dette tilfelle elementet som rendret komponenten. DevTools gir deg mulighet til å se og gå igjennom et tre over alle komponenter som er rendret og hvem som faktisk rendret komponenten. Dette er ikke alltid foreldrekomponenten så dette kan være fint å sjekke ut dersom du opplever uventet props, oppførsel eller liknende for å se hva som rendret komponenten din.