React Hooks deel 1 – State & Effect

React Hooks een relatief nieuw maar populaire feature van React Het is gekomen met React v 16.8 en zorgt ervoor dat we een groot deel van de functionaliteit van Class Based components in functional components kunnen gebruiken. In het eerste deel van dit artikel ga ik vertellen over de meest gebruikte useEffect en useState.
updated: Feb 12, 2021 at 12:23PM | published: Jan 22, 2021

In een vorig artikel waar we Class based components tegenover Fucnctional Components zetten hebben we het al kort gehad over hooks. Dit artikel ga ik wat meer uitleggen over hooks. Wat zijn het nou precies en welke verschillende hooks er zijn en hoe kan je ze gebruiken.

Hooks zijn een nieuwe toevoeging aan React en zijn sinds versie 16.8 te gebruiken. Zij laten je state en andere React Features gebruiken zonder je een complete class te laten schrijven.

Een aantal redenen waarom hooks ontwikkeld zijn is:

Een grote barierre voor veel mensen om React te leren zijn classes. Omdat classses een stuk meer code nodig hebben kunnen ze zeker in de grote complexe applicaties al snel een warboel worden en erg onoverzichtelijk. Ook moet je goed begrijpen hoe this werkt zeker aangezien dit anders werkt dan in de meeste andere talen. Je moet elke evente handler binden anders loop je tegen problemen aan.

De complexiteit van classes wordt op een gegeven momenet ook vreselijk onoverzichtelijk. Je classes beginnen vaak simpel maar kunnen al snel een onhandelbare rommel worden. Elke lifecycle method heeft een zooi ongrelateerde logica bijvoorbeeld een componentDidMount haalt wat data naar binnen via een API maar in dezelfde method zit ook het opzetten van je event handlers. Diezelfde event handlers ruim je vervolgens op in componentWillUnmount. Logica die bij elkaar hoort wordt dus in verschillende methods opgesplits terwijl logica die niks met elkaar te maken heeft in dezelfde lifecycle method zit.

Wat is nou precies een hook?

een hook is eigenlijk een speciale functie die je gebruik laat maken van bepaalde React functionaliteiten door er in “te hooken” Bijvoorbeeld de useState hook zorgt ervoor dat je kan “hooken” in de React functionaliteit die State regelt. Zo kan je state toevoegen aan functional components en hoef je deze niet eerst om te bouwen naar een class based component.

Hieronder zal ik de 2 meest gebruikte hooks beschrijven

UseState

Als we state willen gebruiken in onze functional components dan kunnen we de useState hook gebruiken. Wat dit doet is het verklaart een state variabele. In onderstaand voorbeeld hebben we hem weather genoemd, maar we hadden hem ook net zo goed pietjepuk kunnen noemen. State variabele worden door React opgeslagen.

Het enige argument dat we aan de useState hoek meegeven is de begin waarde van de state. Dus in ons weer geval kunnnen we zeggen dan de eerste waarde, voor onze weather state, zonnig is.

Onze useState functie returned ook 2 waardes dit zijn de huidige waarde van de state en de functie die de state update. Als we dit vergelijken met een Class Based component dan zouden we in onze constructor this.state = { weather: ‘zonnig’} hebben en om de state te updaten zouden we this.setState({ weather: ‘regenachtig’ })

JS

import react, { useState } from ‘react’;

const VbComponent = () => {
      const [weather, setWeather] = useState(‘Zonnig’);
}

Als we onze state willen lezen dan kunnen we gewoon simpel {weather} gebruiken in onze code en willen we onze state updaten dan kunnen we simpel de meegeleverde functie gebruiken en zo onze state te updaten. En als we bovenstaand voorbeeld uitbreiden ziet dat er zo uit. De state als we dit component laden is ‘Zonnig’ maar klikken we op de knop dan wordt onze state ‘Regenachtig’.

JS

import react, { useState } from ‘react’;

const VbComponent = () => {
const [weather, setWeather] = useState(‘Zonnig’);

return(
      <div>
            <button onClick=”{() => setWeather(‘Regenachtig’)}”>
                  update weather state
            </button>
      </div>
      )
}

useEffect

De useEffect functie zorgt ervoor dat je side effect kan gebruiken in je component. useEffect staat daarom ook voor use side effect, deze effecten kan je bijvoorbeeld gebruiken om data op te halen event handlers te registren en veranderingen maken in de dom. In class based components deed je deze effecten in de lifecycle methods, de useEffect hook zorgt ervoor dat je de functionaliteit van lifecycle methods in functional components kan gebruiken.

De useEffect hook kan 2 argumenten pakken de eerste is de functie die je wil uitvoeren en de tweede is een array met afhankelijkheden. Zo kan je een aantal mogelijke variaties creeeren die erg lijken op de lifecycle methods van class based components.

  • Als je geen 2e argument toevoegd dan zal useEffect on first render EN elke rerender runnen dit lijkt erg op de componentDidUpdate() method

    useEffect(() => {});

  • Als je een dependency toevoegd als 2e argument dan zal useEffect gaan lopen elke keer als dat argument geupdate wordt dit is ook een specifieke methode van componentDidUpdate()

    useEffect(() => {}, [weather]);

  • Als je een leeg array als 2e argument toevoegd dan zal hij maar 1 keer lopen want hij heeft nergens van afhankelijk deze lijkt heel erg op componentDidMount()

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

  • Als je een cleanup functie wil toevoegen dan kan je een functie returnen die de cleanup uitvoerd dit lijkt op de componentWillUnmount() method

    useEffect(() => {
    //wordt geroepen voor unmounting

    return () => {
    //wordt geroepen tijdens unmounting
    };

    }, [])

Het mooie van useEffect is dat je de cleanup functie direct in je useEffect hook hebt en niet in een losse method. Zo hou je de code bij elkaar die bij elkaar hoort zeker bij de wat grotere projecten is dit iets wenselijks. React voert de cleanup functie uit wanneer het component unmount, maar effects lopen bij elke rerender. Daarom voert React ook de cleanup functie uit zodat hij de effecten van de vorige render opgeruimd heeft.

Hieronder een voorbeeld van een volledige useEffect functie die data ophaalt op een first render en in een state zet.

JS

import React, { useEffect, useState };

const VbUseEffect () => {

      const [testState, setTestState] = useState([]);

      useEffect(() => {
            const helperFunction = async () =>{
                  const response = await fetch(‘https://eenwebsite/waar/de/content/staat/die/we/willen’);
                  setTestState(response.data);
            }
            helperFunction();
      }, [])

      return(
            <div>Some JSX</div>
      )
}

Hierboven heb ik je een idee gegeven van de meest gebruikte hooks maar er zijn er nog een aantal hier ga ik volgende week verder over vertellen zodat dit artikel niet al te groot wordt.
Heb je een React probleem of ben je op zoek naar iemand die een React applicatie kan maken onze experts zitten altijd voor je klaar.

Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de ReactHooks serie! We gaan het hebben over useCallback en over useMemo. Met deze hooks kunnen we waardes of callback memoizen dit kan nuttig zijn bij zware operaties of om te zorgen dat bepaalde componenten niet altijd mee rerenderen. Zeker omdat bij kleine applicatie het vaak efficienter is om niet te optimaliseren dan wel.

Lees meer
Redux de Intro!

Redux de Intro!

Deze week een korte introductie van de 4 basisbegrippen die je nodig hebt om Redux te begrijpen. We gaan kort uitleggen hoe state wordt aangepast in een Redux Store met behulp van Reducers en Actions. En we vertellen wat al deze begrippen doen en hoe ze werken in een Redux applicatie.

Lees meer

Software ontwikkeling op maat

Hoe werkt het?

Wat wonderen doet voor het ene bedrijf kan zinloos zijn voor een ander bedrijf. Daarom hebben we oplossingen op maat die het unieke karakter van jouw bedrijf respecteren. We werken in een positieve spiraal van testen, monitoren en verzamelen gegevens om precies te weten te komen wat voor jou werkt en wat niet. Het is onze ‘whole package’-mindset, een aandacht voor details die ons in staat stelt om elke keer jouw prestatiedoelstellingen te bereiken. Dus ontspan en geniet van de rit!