Toestandsbeheer met useState

De useState-hook is een fundamentele React-hook die het mogelijk maakt voor functionele componenten om een toestand (state) te hebben. Het biedt een manier om toestandsvariabelen binnen een component te declareren en bij te werken.

Syntaxis:

Om de useState-hook te gebruiken, roepen we deze aan en geven we de initiële toestand (initialState) als argument mee. Het retourneert een array met twee elementen: de huidige waarde van de toestand (state) en een functie (setState) om de toestand bij te werken.

const [state, setState] = useState(initialState);

• Er kan elke willekeurige naam gekozen worden voor een state-variabele. Het is aanbevolen om een variabelenaam te gebruiken die nauwkeurig beschrijft welke toestand wordt opgeslagen of bijgewerkt, zoals inputValue, page, number, name, enzovoort;

• Evenzo is er flexibiliteit in het kiezen van de functienaam bij het gebruik van de setState-functie. Het volgen van een specifiek patroon is echter een standaardconventie: de naam van de setState-functie begint met "set" gevolgd door de naam van de bijbehorende toestandsvariabele. Bijvoorbeeld, als de state-variabele mail is, zou de bijbehorende setState-functie doorgaans setMail genoemd worden.

Voorbeeld 1:

We bouwen de Counter-component, die zijn eigen status bijhoudt. Wanneer op de Increment-knop wordt geklikt, werken we de status bij en wordt de component opnieuw gerenderd.

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

In dit voorbeeld wordt de useState-hook gebruikt om een statusvariabele count te declareren met een initiële waarde van 0. De functie setCount wordt gebruikt om de variabele count bij te werken telkens wanneer op de knop wordt geklikt.

Regel-voor-regel uitleg:

• Regel 1: We importeren de useState-hook uit de React-bibliotheek om de functionaliteit te gebruiken;
• Regel 3: We definiëren de Counter-component met de conventionele functiesyntaxis;
• Regel 4: We initialiseren de status met behulp van de useState-hook;

1. count vertegenwoordigt de waarde van de teller. De initiële waarde is 0, gespecificeerd binnen de haakjes van useState(0);
2. setCount is de functie die de status bijwerkt wanneer dat nodig is.

• Regels 6-8: Deze JavaScript arrow-functie behandelt de logica voor het bijwerken van de status. Deze wordt uitgevoerd wanneer op de "increment"-knop wordt geklikt. Binnen de functie gebruiken we de setCount-functie om de status bij te werken;
• Regels 10-15: rendert de markup van de component. Op regel 12 wordt de huidige statuswaarde (count) weergegeven. De knop op regel 13 gebruikt het onClick-attribuut om de uit te voeren functie bij een klik te definiëren. In dit geval geven we de increment-functie door.

Volledige app-code:

Voorbeeld 2:

We bouwen de Form-component met een eigen, onafhankelijke status. De gebruiker wordt gevraagd zijn naam in te voeren in het invoerveld. Afhankelijk van de invoer van de gebruiker passen we de weergegeven inhoud aan.

import React, { useState } from "react";

const Form = () => {
  const [userName, setUserName] = useState("");

  const handleChange = (event) => {
    const inputValue = event.target.value;
    setUserName(inputValue);
  };

  return (
    <div>
      <input
        type="text"
        value={userName}
        onChange={handleChange}
        placeholder="Your name"
      />
      <p>Hello, {userName}!</p>
    </div>
  );
};

In dit voorbeeld wordt de useState-hook gebruikt om een statusvariabele userName te declareren met als beginwaarde een lege string. De functie setUserName werkt de variabele userName bij wanneer dat nodig is.

Uitleg per regel:

• Regel 1: De useState-hook wordt geïmporteerd uit de React-bibliotheek om de functionaliteit te gebruiken;
• Regel 3: De Form-component wordt gedefinieerd met de standaard functiesyntaxis;
• Regel 4: De initiële status wordt ingesteld met de useState-hook;

1. userName vertegenwoordigt de waarde van het invoerveld, aanvankelijk ingesteld als een lege string (""), gespecificeerd binnen de haakjes van useState("");
2. setUserName is de functie waarmee de status kan worden bijgewerkt wanneer dat nodig is.

• Regels 6-9: Deze JavaScript arrow-functie behandelt de logica voor het bijwerken van de status. Deze wordt geactiveerd wanneer een gebruiker iets in het veld typt. De invoerwaarde wordt binnen de functie opgehaald met event.target.value. Vervolgens wordt de functie setUserName gebruikt om de status bij te werken met de waarde uit het invoerveld;
• Regels 11-21: De markup van de component wordt gerenderd.
  1. Op regel 15 wordt userName als initiële waarde voor het invoerveld toegekend via het value-attribuut;
  2. Op regel 16 wordt het onChange-attribuut gebruikt om de functie te specificeren die wordt aangeroepen bij een wijziging in de invoer.

Volledige app-code: