Vi repeterade lite kort useState och useEffect på morgonen och därefter gick vi in på useMemo men jag fick inte den att fungera alls som jag tänkt mig, så om du ser detta i efterhand så kan du skippa video 2.2 och första hälften av 2.3.
I video 2.4 så visar jag en lite bättre demo av useMemo och hur vi kan nyttja den för t.ex. paginering av ett resultat (vi fejkar en långsam exekvering med hjälp av en tom for-loop som körs 500 000 000 ggr).
Kika gärna på Kyle’s video om useMemo också, och bloggartikeln om densamma (se länkarna i nästa sektion).
Länkar
useMemo
useMemo (React Docs)
https://reactjs.org/docs/hooks-reference.html#usememo
How To Use Memoization To Drastically Increase React Performance (Web Dev Simplified Blog)
https://blog.webdevsimplified.com/2020-05/memoization-in-react/
Learn useMemo In 10 Minutes (Web Dev Simplified)
Workshop
För att öva på useState och useEffect så vill jag att ni under resten av eftermiddagen samt imorgon onsdag gör följande workshop:
Steg 1
Skapa en komponent för Star Wars API som listar alla fordon som finns och där man kan bläddra mellan sidorna av fordon.
API Endpoint: https://swapi.dev/api/vehicles/
Om res.data.previous inte är null så ska Previous-knappen gå att klicka på och det ska trigga en hämtning av den URL:en som finns i res.data.previous.
Likadant om res.data.next inte är null så ska Next-knappen gå att klicka på och det ska trigga en hämtning av den URL:en som finns i res.data.next.
Steg 2 (🌟)
Gör ovan övning generisk så att man kan med knappar välja om man vill bläddra bland people, starships, vehicles, species eller planets.
Du hittar endpoints för dessa i dokumentation för Star Wars API på https://swapi.dev/documentation.