Hooken useState är en grundläggande React-hook som gör det möjligt för funktionella komponenter att ha ett tillstånd. Den tillhandahåller ett sätt att deklarera och uppdatera tillståndsvariabler inom en komponent.

Syntax:

För att använda hooken useState anropas den och det initiala tillståndet (initialState) skickas som argument. Den returnerar en array med två element: det aktuella tillståndsvärdet (state) och en funktion (setState) för att uppdatera tillståndet.

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

• Det går att välja valfritt namn för en state-variabel. Det rekommenderas att använda ett variabelnamn som tydligt beskriver vilket tillstånd som lagras eller uppdateras, till exempel inputValue, page, number, name och så vidare;

• På samma sätt finns det flexibilitet i att välja funktionsnamn för setState. Det är dock standard att följa ett specifikt mönster: namnet på setState-funktionen bör börja med "set" följt av namnet på motsvarande tillståndsvariabel. Till exempel, om state-variabeln är mail, bör motsvarande setState-funktion vanligtvis heta setMail.

Exempel 1:

Vi bygger komponenten Counter, som kommer att hantera sitt eget tillstånd. När knappen Increment klickas uppdateras tillståndet och komponenten renderas om.

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 detta exempel används hooken useState för att deklarera en tillståndsvariabel count med initialvärdet 0. Funktionen setCount används för att uppdatera variabeln count varje gång knappen klickas.

Rad-för-rad-förklaring:

• Rad 1: Vi importerar hooken useState från React-biblioteket för att använda dess funktionalitet;
• Rad 3: Vi definierar komponenten Counter med konventionell funktionssyntax;
• Rad 4: Vi initierar tillståndet med hooken useState;

1. count representerar värdet för räknaren. Dess initialvärde är 0, vilket anges inom parentesen i useState(0);
2. setCount är funktionen som uppdaterar tillståndet vid behov.

• Raderna 6-8: Denna JavaScript arrow-funktion hanterar logiken för att uppdatera tillståndet. Den körs när knappen "increment" klickas. Inuti funktionen används setCount för att uppdatera tillståndet;
• Raderna 10-15: Renderar komponentens markup. På rad 12 visas det aktuella tillståndsvärdet (count). Knappen på rad 13 använder attributet onClick för att definiera vilken funktion som ska köras vid klick. I detta fall skickas funktionen increment.

Fullständig appkod:

Exempel 2:

Vi konstruerar Form-komponenten med dess oberoende tillstånd. Användaren uppmanas att ange sitt namn i inmatningsfältet, och beroende på deras inmatning kommer vi att ändra det visade innehållet.

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 detta exempel används hooken useState för att deklarera en tillståndsvariabel userName med ett initialvärde som är en tom sträng. Funktionen setUserName uppdaterar variabeln userName när vi behöver göra det.

Rad-för-rad-förklaring:

• Rad 1: Vi importerar hooken useState från React-biblioteket för att använda dess funktionalitet;
• Rad 3: Vi definierar Form-komponenten med standardfunktion-syntax;
• Rad 4: Vi sätter initialt tillstånd med hooken useState;

1. userName representerar värdet i inmatningsfältet, initialt satt till en tom sträng (""), specificerat inom parentesen för useState("");
2. setUserName är funktionen som gör det möjligt att uppdatera tillståndet vid behov.

• Raderna 6-9: Denna JavaScript arrow-funktion hanterar logiken för att uppdatera tillståndet. Den triggas när en användare skriver något i fältet. Vi hämtar inmatningsvärdet i funktionen med event.target.value. Vi använder sedan funktionen setUserName för att uppdatera tillståndet med värdet från inmatningsfältet;
• Raderna 11-21: Komponentens markup renderas.

1. På rad 15 tilldelar vi userName som initialvärde för inmatningen med attributet value;
2. På rad 16 använder vi attributet onChange för att ange vilken funktion som ska anropas vid ändring i inmatningen.

Komplett appkod: