React Hooks Deel 1 State & Effect: Vereenvoudig je React Components

kennisbank, React

Gepubliceerd: 29.01.2024

React Hooks, geïntroduceerd in versie 16.8, zijn een revolutionaire toevoeging aan React waarmee je functionaliteiten van Class-Based components kunt gebruiken in functionele components. Dit eerste deel van de blog richt zich op belangrijke functies zoals `useEffect` en `useState`.

Waarom zijn Hooks ontwikkeld?

De introductie van Hooks gaat in op de complexiteit van classes. Classes vereisen vaak meer code en kunnen snel onhandelbaar worden in grote applicaties. Het begrijpen van het 'this'-concept, onnodige binding van event handlers en verspreide logica binnen lifecycle methods maken het leren van React met classes uitdagend.

Hooks bieden een gestroomlijnde aanpak, waardoor je state en andere React-functies kunt gebruiken zonder de noodzaak om volledige class components te schrijven. Dit maakt de code leesbaarder en gemakkelijker te begrijpen, vooral in grotere projecten.

Wat is een Hook?

Een Hook is een speciale functie die je toegang geeft tot specifieke React-functionaliteiten. Door deze functies te gebruiken, kun je eenvoudig state toevoegen aan functionele components zonder ze om te zetten naar class-based components.

  • `useState` – Beheer van State in Functionele Components

    Wil je state gebruiken in functionele components? Gebruik dan de `useState` hook. Deze hook declareert een state variabele,

    
    import React, { useState } from 'react';
    
    const VoorbeeldComponent = () => {
      const [weer, setWeer] = useState('Zonnig');
    }
            

    De `useState` hook retourneert twee waarden: de huidige waarde van de state (`weer`) en de functie om de state bij te werken (`setWeer`). In vergelijking met class-based components, waarbij we in de constructor `this.state = { weer: 'zonnig'}` zouden gebruiken, is deze hook een vereenvoudiging.

    
        import react, { useState } from ‘react’;
    const VbComponent = () => {
    const [weather, setWeather] = useState(‘Zonnig’);
    
    return(
          <div>
                <button onclick="”{()" ==""> setWeather(‘Regenachtig’)}”>
                      update weather state
                </button>
          </div>
          )
    }
    
    
      
  • `useEffect` – Voeg Side Effects toe aan je Component

    De `useEffect` hook maakt het mogelijk side effects toe te voegen aan je component, vergelijkbaar met de lifecycle methods in class-based components. Je kunt deze hook gebruiken om data op te halen, event handlers te registreren en veranderingen in de DOM aan te brengen.

    
    import React, { useEffect, useState } from 'react';
    
    const VoorbeeldUseEffect = () => {
      const [testState, setTestState] = useState([]);
    
      useEffect(() => {
        const helperFunctie = async () => {
          const response = await fetch('https://eenwebsite/waar/de/content/staat/die/we/willen');
          setTestState(response.data);
        }
        helperFunctie();
      }, []);
    
      return (
        
    Wat JSX
    ); }

Lees hier onze blogs!

Breid je kennis uit met de 4BIS Blog...

WordPress en Plugins – Een wereld die voor je open gaat!

WordPress, Webontwikkeling, Ecommerce / Webshop, kennisbank, WooCommerce

Met plugins kan je functionaliteit van wordpress uitbreiden of geheel nieuwe functies aan wordpress toevoegen. Plugins kan je zelf maken, mits je verstand hebt van php, of je kan ze downloaden.

Lees meer

Onthulling van Tech-Nieuws.nl: Waar Innovatie Samenkomt met Vindingrijkheid

SEO / SEA, Software-modernisering, Webontwikkeling, PHP, Symfony, Digitale Marketing

In het bruisende rijk van technologie is up-to-date blijven niet alleen een noodzaak maar een levensstijl geworden. Met een overvloed aan informatie die ons dagelijks overspoelt, wordt een betrouwbare bron om het laatste technieuws te selecteren en te...

Lees meer

HR software: Zo automatiseer je Human Resource Management

Bedrijfssoftware, Software-modernisering, Webontwikkeling, Automatisering

HRM, ook wel Human Resource Management, is een belangrijk onderdeel voor ieder bedrijf. Vooral als je veel werknemers hebt, is een HR afdeling niet te missen. Het is echter niet nodig om een enorme HR afdeling te hebben. Veel is te automatiseren door...

Lees meer

En wat kunnen we voor jou betekenen?_

Wil je meer weten of heb je interesse? Neem dan gerust direct contact met ons op, per telefoon of via de mail.
Of maak gebruik van één van onze contactformulieren zodat we je zo snel en gepast mogelijk antwoord kunnen geven. We horen graag van je!

back to top