Först gick vi igenom lösningsförslag på workshop:en från i tisdags där ni skulle skriva en funktions-komponent som hämtar ut vehicles från Star Wars API, och se om ni kunde få Previous/Next page att fungera vilket många hade lyckats med 🥳.
Vi kikade även på steg 2 där man skulle kunna byta ”typ” av resurs att lista, och några hade problem med att man hamnade på ”fel” sida (dvs inte sida 1) när man bytte resurs, men det löste sig genom att antingen sätta page-state samtidigt som man satte den nya resursen, eller genom att som jag föreslog att spara hela API-svaret i en resultat-state.
Dagens nya hook hette useRef och den behåller sitt värde mellan renderingar, och man kan ändra värdet i den utan att det triggar en omrendering av komponenten så som useState gör. Man kan jämföra den med att ha en variabel i en instans av en klass när det gäller klass-komponenter.
useRef kan även användas för att bindas till ett DOM-element, t.ex. för att kunna kalla .focus() på ett input-fält. Obs! Använd aldrig för att modifiera DOM på något sätt – detta förstör reaktiviteten och kommer orsaka er ofantlig huvudvärk!
Vi kan även använda useRef för att spara en tidigare state genom att sätta ref till den gamla state:n innan vi kallar på set för state:n.
På eftermiddagen gick jag igenom ett exempel på en (lite halvt meningslös) Custom Hook, och att de egentligen bara är moduler som använder andra hooks men att vi kan kapsla in all logik i dem så att vi ifrån våra komponenter inte behöver ”bry” oss om all eventuell komplexitet/sätta state osv. utan kan använda dem direkt och få mycket renare kod.
Läs Kyle’s bloggartikel om The Power of Custom Hooks och gör hans LocalStorage-hook (kolla även den tillhörande videon Learn Custom Hooks in 10 Minutes), och kika därefter på Smashing Magazine’s How To Create A Custom React Hook To Fetch And Cache Data (den näst sista delen om caching med hjälp av useRef är valfri, och skippa den sista delen om useReducer).
Länkar
useRef (React Docs)
https://reactjs.org/docs/hooks-reference.html#useref
Artiklar
The Power of Custom Hooks (Web Dev Simplified Blog)
https://blog.webdevsimplified.com/2019-11/how-to-write-custom-hooks/
How To Create A Custom React Hook To Fetch And Cache Data
https://www.smashingmagazine.com/2020/07/custom-react-hook-fetch-cache-data/
Videos
Learn useRef in 11 Minutes
Learn Custom Hooks In 10 Minutes (Web Dev Simplified)
Workshop
Läs igenom Kyle’s bloggartikel om Custom Hooks, kolla på hans video där han gör en LocalStorage-hook och läs därefter igenom Smashing Magazine’s bloggartikel om hur man skapar Custom Hooks.
Se om du kan implementera Smashing Magazine’s useFetch-hook för att söka efter nyheter från Hacker News API (använd endpoint:en https://hn.algolia.com/api/v1/search_by_date?query=).
Lycka till & trevlig helg!