Håndtering av Tilstand med useState

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

Syntaks:

For å bruke hooken useState, kalles den med den innledende tilstanden (initialState) som 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 navn for 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 navn på funksjonen setState. Det er imidlertid 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.

Eksempel 1:

Vi skal bygge Counter-komponenten, som vil håndtere sin egen tilstand. Når knappen Increment klikkes, oppdaterer vi tilstanden og utløser en ny rendering av 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 eksempelet brukes useState-hooken til å deklarere en tilstandsvariabel count med startverdi 0. Funksjonen setCount brukes til å oppdatere count-variabelen 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, endres 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: useState-hooken importeres fra React-biblioteket for å benytte funksjonaliteten;
• Linje 3: Form-komponenten defineres ved bruk av standard funksjonssyntaks;
• Linje 4: Initial tilstand settes ved bruk av useState-hooken;
  1. userName representerer verdien til input-feltet, som i utgangspunktet er en tom streng (""), spesifisert i parentesen til useState("");

2. setUserName er funksjonen som gjør det mulig å 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. Input-verdien hentes i funksjonen med event.target.value. Deretter brukes setUserName-funksjonen for å oppdatere tilstanden med verdien fra input-feltet;
• Linje 11-21: Komponentens markup rendres.
  1. På linje 15 tildeles userName som initialverdi for input ved bruk av value-attributtet;
  2. På linje 16 brukes onChange-attributtet for å spesifisere funksjonen som skal kalles ved endring i input.

Full app-kode: