useState-hooken ä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 useState-hooken 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);

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

• På samma sätt finns flexibilitet vid namngivning av setState-funktionen. 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.

Note

När setState anropas, renderar React om komponenten och uppdaterar tillståndet med det nya värdet. Det är viktigt att notera att när useState används behöver tillståndsvariabeln inte vara ett objekt. Den kan vara ett primitivt värde (som ett nummer, en sträng eller en boolean) eller ett komplext värde (som en array eller ett objekt).

Exempel 1:

Vi bygger komponenten Counter, som kommer att hantera sitt eget tillstånd. När knappen Increment klickas uppdaterar vi tillståndet och utlöser en omrendering 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 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, angivet inom parentesen för useState(0);
2. setCount är funktionen som uppdaterar tillståndet vid behov.

• Rad 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;
• Rad 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.

Komplett appkod:

Exempel 2:

Vi konstruerar Form-komponenten med dess egna 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 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 som en tom sträng (""), specificerat inom parentesen för useState("");
2. setUserName är funktionen som låter oss uppdatera tillståndet vid behov.

• Rad 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;
• Rad 11-21: Komponentens markup renderas.

1. På rad 15 tilldelar vi userName som initialt värde för inmatningen med attributet value;
2. På rad 16 använder vi attributet onChange för att specificera funktionen som ska anropas när det sker en förändring i inmatningen.

Komplett appkod: