Hooken useState er en grundlæggende React-hook, der gør det muligt for funktionelle komponenter at have en tilstand. Den giver en metode til at erklære og opdatere tilstandsvariabler inden for en komponent.

Syntaks:

For at bruge useState-hooken kaldes den med den oprindelige tilstand (initialState) som argument. Den returnerer et array med to elementer: den aktuelle tilstandsværdi (state) og en funktion (setState) til at opdatere tilstanden.

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

• Det er muligt at vælge et vilkårligt navn til en state-variabel. Det anbefales at bruge et variabelnavn, der præcist beskriver, hvilken tilstand der gemmes eller opdateres, såsom inputValue, page, number, name osv.;

• Tilsvarende har man fleksibilitet i navngivningen af setState-funktionen. Det er dog standard at følge et bestemt mønster: navnet på setState-funktionen bør starte med "set" efterfulgt af navnet på den tilhørende tilstandsvariabel. For eksempel, hvis state-variablen hedder mail, vil den tilhørende setState-funktion typisk hedde setMail.

Note

Når setState kaldes, gen-renderer React komponenten og opdaterer tilstanden med den nye værdi. Det er vigtigt at bemærke, at når man bruger useState, behøver tilstandsvariablen ikke at være et objekt. Den kan være en primitiv værdi (som et tal, en streng eller en boolean) eller en kompleks værdi (som et array eller objekt).

Eksempel 1:

Vi bygger Counter-komponenten, som vedligeholder sin egen tilstand. Når knappen Increment klikkes, opdaterer vi tilstanden og udløser en genrendering af komponenten.

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>
  );
};

I dette eksempel bruges useState-hooken til at erklære en tilstandsvariabel count med startværdien 0. Funktionen setCount bruges til at opdatere variablen count, hver gang knappen klikkes.

Linje-for-linje forklaring:

• Linje 1: Vi importerer useState-hooken fra React-biblioteket for at udnytte dens funktionalitet;
• Linje 3: Vi definerer Counter-komponenten ved hjælp af den konventionelle funktionssyntaks;
• Linje 4: Vi initialiserer tilstanden med useState-hooken;

1. count repræsenterer værdien af tælleren. Startværdien er 0, angivet i parentesen i useState(0);
2. setCount er funktionen, der opdaterer tilstanden efter behov.

• Linje 6-8: Denne JavaScript arrow-funktion håndterer logikken for opdatering af tilstanden. Den udføres, når "increment"-knappen klikkes. Inde i funktionen bruger vi setCount til at opdatere tilstanden;
• Linje 10-15: Renderer komponentens markup. På linje 12 vises den aktuelle tilstandsværdi (count). Knappen på linje 13 anvender attributten onClick til at definere den funktion, der skal udføres ved klik. I dette tilfælde videregives funktionen increment.

Fuld app-kode:

Eksempel 2:

Vi konstruerer Form-komponenten med sin egen uafhængige tilstand. Brugeren bliver bedt om at indtaste deres navn i inputfeltet, og afhængigt af deres input vil vi ændre det viste indhold.

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>
  );
};

I dette eksempel anvendes useState-hooket til at erklære en tilstandsvariabel userName med en initialværdi som en tom streng. Funktionen setUserName opdaterer variablen userName, når det er nødvendigt.

Linje for linje forklaring:

• Linje 1: Vi importerer useState-hooket fra React-biblioteket for at benytte dets funktionalitet;
• Linje 3: Vi definerer Form-komponenten ved hjælp af den standard funktionssyntaks;
• Linje 4: Vi sætter den indledende tilstand ved brug af useState-hooket;

1. userName repræsenterer værdien af inputfeltet, som initialt er sat til en tom streng (""), angivet i parentesen til useState("");
2. setUserName er funktionen, der gør det muligt at opdatere tilstanden efter behov.

• Linje 6-9: Denne JavaScript arrow-funktion håndterer logikken for opdatering af tilstanden. Den udløses, når brugeren indtaster noget i feltet. Vi henter inputværdien i funktionen via event.target.value. Derefter benyttes setUserName-funktionen til at opdatere tilstanden med værdien fra inputfeltet;
• Linje 11-21: Komponentens markup bliver gengivet.
  1. På linje 15 tildeles userName som den indledende værdi for input via value-attributten;
  2. På linje 16 anvendes onChange-attributten til at angive den funktion, der skal kaldes, når der sker en ændring i input.

Fuld app-kode: