React: Do czego służy useState?

Czym jest useState?

useState w React jest to hook, który służy do zarządzania stanem komponentu. Może on zostać wykorzystany tylko w komponencie stworzonym za pomocą funkcji.

Przykład użycia useState

Poniżej prosty przykład użycia useState:

import React, { useState } from 'react';

const Counter = () => {
    const [counter, setCounter] = useState(0);


    const onIncrement = () => {
        setCounter(counter + 1);
    }

    const onDecrement = () => {
        setCounter(counter - 1);
    }

    return (
        <div>
            <button onClick={onDecrement}>-</button>
            <h2>{counter}</h2>
            <button onClick={onIncrement}>+</button>
        </div>
    )
}

Linijka:

const [counter, setCounter] = useState(0);

jest odpowiedzialna za stworzenie stanu naszego komponentu. Tutaj chcemy stworzyć stan do zarządzania wartością licznika.

useState przyjmuje jeden argument: wartość początkową, gdy komponent jest tworzony.

useState zwraca: zmienną, która przechowuje aktualny stan. W tym przypadku stała counter. Zwraca także funkcję, która pozwala zmienić stan na nowy: setCounter.

Jeśli potrzebujemy stworzyć stan dla różnych danych wystarczy wywołać jeszcze raz useState na przykład:

const [counter, setCounter] = useState(0);
const [list, setList] = useState([]);