Forrige gang skrev jeg om en React-eksempelapp med et API-kall til RandomUser.me.
Den versjonen var klassisk React, og nå har jeg oppdatert den til å bruke kroker i stedet.
Med klassisk React brukte vi klassekomponenter og muterte deres interne tilstand via setState
når vi ønsket å gjøre noe.
Med React-kroker kan vi bruke funksjonelle komponenter i stedet, med State-kroken useState
, som i seg selv er en React-funksjon.
Vi importerer useState
slik øverst i filen vår:
import React, { useState } from "react";
Deretter erklærer vi vår funksjonelle komponent, slik:
export default function RandomUser() {}
Deretter vil vi bruke EcmaScript 6 (ES6) destrukturering og useState
for å returnere en matrise for bruk i vår komponent:
const [name, setName] = useState([]);
user
og setUser
variabelnavn kan være hva du vil, så lenge de er beskrivende, selvfølgelig.
Deretter bruker vi effektkroken useEffect
for å initialisere funksjonen vår og sette den inn i treet. useEffect
"tjener samme formål som componentDidMount
, componentDidUpdate
og componentWillUnmount
i React-klasser, men samlet til et enkelt API". (React Hooks-dokumentasjon)
Søt – useEffect
tar seg av mye for oss!
Som du kan se, har vi et anrop til fetchRandomUser()
, som vil være en asynkronfunksjon med vårt API-kall.
Hele koden ser slik ut:
Sammenlign denne funksjonelle komponenten med krokprøve, med den forrige prøven av klassekomponenter, vi har nå 48 rader, mot 65 rader før.
Her er Github-repoen