useState-hook on keskeinen React-hook, jonka avulla funktiokomponentit voivat hallita tilaa. Se mahdollistaa tilamuuttujien määrittelyn ja päivittämisen komponentin sisällä.

Syntaksi:

useState-hookia käytetään kutsumalla sitä ja antamalla alkuperäinen tila (initialState) argumenttina. Se palauttaa taulukon, jossa on kaksi alkiota: nykyinen tilan arvo (state) ja funktio (setState), jolla tilaa päivitetään.

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

• Voimme valita minkä tahansa sanan state-muuttujan nimeksi. On suositeltavaa käyttää nimeä, joka kuvaa tallennettavaa tai päivitettävää tilaa, kuten inputValue, page, number tai name.

• Vastaavasti setState-funktion käytössä on joustavuutta funktion nimen valinnassa. Kuitenkin vakiintunut käytäntö on nimetä setState-funktion nimen alkaen "set"-etuliitteellä ja lisäämällä tilamuuttujan nimi perään. Esimerkiksi, jos state-muuttuja on mail, vastaava setState-funktio olisi nimeltään setMail.

Huomio

Kun setState-funktiota kutsutaan, React renderöi komponentin uudelleen ja päivittää tilan uudella arvolla. On tärkeää huomioida, että useState-hookin kanssa tilamuuttujan ei tarvitse olla olio. Se voi olla primitiivinen arvo (kuten numero, merkkijono tai boolean) tai monimutkaisempi arvo (kuten taulukko tai olio).

Esimerkki 1:

Rakennetaan Counter-komponentti, joka ylläpitää omaa tilaansa. Kun "Increment"-painiketta painetaan, tila päivitetään ja komponentti renderöidään uudelleen.

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

Tässä esimerkissä useState-hookia käytetään tilamuuttujan count määrittämiseen, jonka alkuarvo on 0. setCount-funktiolla päivitetään count-muuttuja aina, kun painiketta painetaan.

Rivikohtainen selitys:

• Rivi 1: Tuodaan useState-hook React-kirjastosta sen toiminnallisuuden hyödyntämiseksi;
• Rivi 3: Määritellään Counter-komponentti tavanomaisella funktiosyntaksilla;
• Rivi 4: Alustetaan tila useState-hookilla;
  1. count edustaa laskurin arvoa. Sen alkuarvo on 0, joka määritellään useState(0)-kutsussa;

2. setCount on funktio, jolla tila päivitetään tarvittaessa.

• Rivillä 6-8: Tämä JavaScript-nuolifunktio käsittelee tilan päivityslogiikan. Se suoritetaan, kun "increment"-painiketta painetaan. Funktion sisällä käytetään setCount-funktiota tilan päivittämiseen;
• Rivillä 10-15: Renderöidään komponentin merkkaus. Rivillä 12 näytetään nykyinen tilan arvo (count). Painike rivillä 13 hyödyntää onClick-attribuuttia määrittääkseen suoritettavan funktion painettaessa. Tässä tapauksessa välitetään increment-funktio.

Koko sovelluksen koodi:

Esimerkki 2:

Rakennetaan Form-komponentti, jolla on oma itsenäinen tila. Kehotamme käyttäjää syöttämään nimensä syötekenttään, ja syötteen perusteella muokkaamme näytettävää sisältöä.

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

Tässä esimerkissä useState-hookia käytetään tilamuuttujan userName määrittämiseen, jonka alkuarvo on tyhjä merkkijono. setUserName-funktiolla päivitetään userName-muuttuja aina tarvittaessa.

Rivikohtainen selitys:

• Rivi 1: Tuodaan useState-hook React-kirjastosta sen toiminnallisuuden käyttämiseksi;
• Rivi 3: Määritellään Form-komponentti käyttämällä tavallista funktiosyntaksia;
• Rivi 4: Asetetaan alkuperäinen tila useState-hookilla;
  1. userName edustaa syötekentän arvoa, joka on aluksi tyhjä merkkijono (""), määriteltynä useState("")-kutsussa;

2. setUserName on funktio, jonka avulla tilaa voidaan päivittää tarvittaessa.

• Rivillä 6-9: Tämä JavaScript-nuolifunktio käsittelee tilan päivityslogiikan. Se laukaistaan, kun käyttäjä kirjoittaa kenttään. Syötteen arvo haetaan funktiossa event.target.value avulla. Tämän jälkeen käytetään setUserName-funktiota tilan päivittämiseen syötekentän arvolla;
• Rivillä 11-21: Komponentin merkkaus renderöidään.
  1. Rivillä 15 asetetaan userName syötekentän alkuarvoksi value-attribuutilla;
  2. Rivillä 16 käytetään onChange-attribuuttia määrittämään funktio, joka kutsutaan kun syötteessä tapahtuu muutos.

Sovelluksen koko koodi: