React hooks - Hur fungerar React hooks?

Med React 16.8 (6 februari 2019) kom möjligheten att använda hooks i komponenter som inte är en class – dvs funktionella komponenter. Men hur fungerar egentligen React hooks?
Läser man dokumentationen (https://react.dev/reference/react) presenteras tidigt två typer av hooks, State Hook och Effect Hook. För dig som är van vid att koda React-komponenter som klasser är den i mitt tycke enklaste förklaringen följande:

State Hook (useState) innefattar: State och setState.
Effect Hook (useEffect) innefattar: Alla lifecycle methods.

I följande exempel har vi en funktionell React komponent, alltså inte en class, som importerar useState och useEffect.

import { useState, useEffect } from 'react';
import axios from 'axios';

const FunctionBasedComponent = () => {
    const [ searchResult, setSearchResult ] = useState([]);
    const [ query, setQuery ] = useState([]);

    const doSearch = async () => {
        const response = await axios.
        get(`http://website.se/search?query=${query}`);
        setSearchResult(response.data);
    };
  
  useEffect( () => { doSearch() }, [query]);

  return(
 //Markup for searching
 <></>
  );
}
export default FunctionBasedComponent;

useState initialiseras genom att i en array skicka in ett variabelnamn (searchResult) samt en funktion (setSearchResult) för att förändra variabeln.

const [ searchResult, setSearchResult ] = useState([]);

searchResult har i det här fallet inget initialt värde från början men det går även att initialisera useState med ett värde till din variabel.

const [ searchResult, setSearchResult ] = useState(['Webking']);

Funktionen doSearch()  hämtar data genom ett API-anrop. Resultatet av detta skickas in som ett argument till setSearchResult som i sin tur ger variabeln searchResult ett nytt värde.

const doSearch = async () => {
  const response = await axios.get(`http://website.se/search?query=${query}`);
        setSearchResult(response.data);
    };

Vad är då useEffects roll i detta? Precis som med componentDidMount så kallas funktionen i useEffect (i det här fallet doSearch()) så fort komponenten laddas. Den kallas även så fort komponenten uppdateras, likt componentDidUpdate.

  useEffect( () => { doSearch() });

I exemplet ovan kommer vi dock stöta på problem i form en evighetsloop då doSearch() använder setSearchResult som uppdaterar komponentens state – vilket i sin tur triggar useEffect om och om igen.

useEffect( () => { doSearch(searchResult), [] });

Effect hook har möjligheten att vara beroende av något för att köras. För att lösa problemet ovan kan vi som ett andra argrument till useEffect skicka in en tom array. Nu kommer useEffect endast köras en gång – när komponenten laddas, detta då useEffect är beroende av något som aldrig kan ändras.

useEffect( () => { doSearch() }, [query]);

I exemplet ovan är useEffect istället beroende av state-variabeln query. Så fort query förändras kommer useEffect köras. Perfekt om man exempelvis vill söka i realtid! React hooks gör komponenter slimmade och på så vis mer lättöverskådliga. I exemplet jag nu gått igenom har vi genom kort och koncis kod byggt en funktion för att söka efter data.

import { useState, useEffect } from 'react';
import axios from 'axios';

const FunctionBasedComponent = () => {
    const [ searchResult, setSearchResult ] = useState([]);
    const [ query, setQuery ] = useState([]);

    const doSearch = async () => {
        const response = await axios.
        get(`http://website.se/search?query=${query}`);
        setSearchResult(response.data);
    };
  
  useEffect( () => { doSearch() }, [query]);

  return(
 //Markup for searching
 <></>
  );
}

export default FunctionBasedComponent;