Blogg

6 september, 2020

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://reactjs.org/docs/hooks-intro.html) 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;
Nyheter, Webbutveckling ,
Johan De Groot
About Johan De Groot
Johan är en driven, organiserad och engagerad kille som brinner för utveckling och IT. Johan har ett stort intresse för app- och webbutveckling och arbetar gärna med programmeringsspråk som React Native, React.js, Angular.js, JavaScript, TypeScript, HTML5, CSS3 mfl. Johan har även ett starkt intresse för UI/UX, samt användarcentrerad utveckling och design. Detta återspeglas även i Johans personlighet. Kvalitet och funktionalitet ligger i fokus på allt han tar sig an.

Leave a Reply

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.

SWITCH THE LANGUAGE
Webking
Torggatan 6, 582 19 Linköping, Sweden
020-89 94 42
Nyhetsbrev

Registrera dig till vårt nyhetsbrev och få tips samt en checklista som visar hur du optimerar din webbplats och får fler besökare och kunder.