Hooken useState er en grunnleggende React-hook som gjør det mulig for funksjonelle komponenter å ha tilstand. Den gir en måte å deklarere og oppdatere tilstandsvariabler i en komponent.

Syntaks:

For å bruke hooken useState, kaller vi den og sender inn den opprinnelige tilstanden (initialState) som et argument. Den returnerer et array med to elementer: den nåværende tilstandsverdien (state) og en funksjon (setState) for å oppdatere tilstanden.

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

• Det er mulig å velge hvilket som helst ord som navn på en state-variabel. Det anbefales å bruke et variabelnavn som nøyaktig beskriver hvilken tilstand som lagres eller oppdateres, for eksempel inputValue, page, number, name og lignende.

• På samme måte har man fleksibilitet i valg av funksjonsnavn når man bruker setState-funksjonen. Likevel er det en standardkonvensjon å følge et bestemt mønster: navnet på setState-funksjonen bør starte med "set" etterfulgt av navnet på den tilhørende tilstandsvariabelen. For eksempel, hvis state-variabelen er mail, vil den tilhørende setState-funksjonen vanligvis hete setMail.

Merk

Når vi kaller setState, re-renderer React komponenten og oppdaterer tilstanden med den nye verdien. Det er viktig å merke seg at når man bruker useState, trenger ikke tilstandsvariabelen å være et objekt. Den kan være en primitiv verdi (som et tall, en streng eller en boolean) eller en kompleks verdi (som et array eller objekt).

Eksempel 1:

Vi skal bygge Counter-komponenten, som vil håndtere sin egen tilstand. Når knappen Increment klikkes, oppdateres tilstanden og komponenten rendres på nytt.

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 eksempelet brukes useState-hooken til å deklarere en tilstandsvariabel count med startverdi 0. Funksjonen setCount brukes til å oppdatere variabelen count hver gang knappen klikkes.

Forklaring linje for linje:

• Linje 1: Vi importerer useState-hooken fra React-biblioteket for å benytte dens funksjonalitet;
• Linje 3: Vi definerer Counter-komponenten ved å bruke konvensjonell funksjonssyntaks;
• Linje 4: Vi initialiserer tilstanden ved hjelp av useState-hooken;

1. count representerer verdien til telleren. Startverdien er 0, spesifisert i parentesen til useState(0);
2. setCount er funksjonen som oppdaterer tilstanden ved behov.

• Linje 6-8: Denne JavaScript arrow-funksjonen håndterer logikken for å oppdatere tilstanden. Den kjøres når "increment"-knappen klikkes. Inne i funksjonen bruker vi setCount-funksjonen for å oppdatere tilstanden;
• Linje 10-15: Gjengir komponentens markup. På linje 12 vises den nåværende tilstandsverdien (count). Knappen på linje 13 bruker attributtet onClick for å definere funksjonen som skal kjøres ved klikk. I dette tilfellet sender vi inn increment-funksjonen.

Full app-kode:

Eksempel 2:

Vi konstruerer Form-komponenten med sin egen uavhengige tilstand. Brukeren blir bedt om å skrive inn navnet sitt i input-feltet, og avhengig av hva som skrives inn, vil vi endre det viste innholdet.

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 eksempelet brukes useState-hooken til å deklarere en tilstandsvariabel userName med en initialverdi som en tom streng. Funksjonen setUserName oppdaterer variabelen userName når det er nødvendig.

Forklaring linje for linje:

• Linje 1: Vi importerer useState-hooken fra React-biblioteket for å bruke funksjonaliteten;
• Linje 3: Vi definerer Form-komponenten ved å bruke standard funksjonssyntaks;
• Linje 4: Vi setter initial tilstand ved å bruke useState-hooken;
  1. userName representerer verdien til input-feltet, som i utgangspunktet er satt til en tom streng (""), spesifisert i parentesen til useState("");

2. setUserName er funksjonen som lar oss oppdatere tilstanden ved behov.

• Linje 6-9: Denne JavaScript arrow-funksjonen håndterer logikken for å oppdatere tilstanden. Den utløses når brukeren skriver noe i feltet. Vi henter input-verdien i funksjonen ved å bruke event.target.value. Deretter bruker vi setUserName-funksjonen for å oppdatere tilstanden med verdien fra input-feltet;
• Linje 11-21: Komponentens markup blir gjengitt.
  1. På linje 15 setter vi userName som initialverdi for input ved å bruke value-attributtet;
  2. På linje 16 bruker vi onChange-attributtet for å spesifisere funksjonen som skal kalles når det skjer en endring i input.

Full app-kode: