De useState-hook is een fundamentele React-hook die functionele componenten toestaat om een status te hebben. Het biedt een manier om statusvariabelen binnen een component te declareren en bij te werken.

Syntax:

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

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

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

• Op dezelfde manier hebben we flexibiliteit bij het kiezen van de functienaam voor setState. Echter, het volgen van een specifiek patroon is een standaardconventie: de naam van de setState-functie begint met "set" gevolgd door de naam van de bijbehorende statusvariabele. Bijvoorbeeld, als de state-variabele mail is, zou de bijbehorende setState-functie doorgaans setMail genoemd worden.

Opmerking

Wanneer setState wordt aangeroepen, rendert React de component opnieuw en werkt de status bij met de nieuwe waarde. Het is belangrijk om te weten dat bij gebruik van useState de statusvariabele geen object hoeft te zijn. Het kan een primitieve waarde zijn (zoals een getal, string of boolean) of een complexe waarde (zoals een array of object).

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 functie setCount 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 functie te definiëren die wordt uitgevoerd bij een klik. In dit geval geven we de increment-functie door.

Volledige app-code:

Voorbeeld 2:

We construeren 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 initiële waarde een lege string. De functie setUserName werkt de variabele userName bij wanneer dat nodig is.

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 Form-component met behulp van de standaard functiesyntaxis;
• Regel 4: We stellen de initiële status in 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 we de status kunnen bijwerken 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. We halen de invoerwaarde op binnen de functie met event.target.value. Vervolgens gebruiken we de functie setUserName 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 wijzen we userName toe als initiële waarde voor de input met behulp van het value-attribuut;
  2. Op regel 16 gebruiken we het onChange-attribuut om de functie te specificeren die wordt aangeroepen wanneer de invoer verandert.

Volledige app-code: