Czym jest stan?

Wszystko do tej pory było niezmienne: dane trafiały na wejście, strona pojawiała się na wyjściu i nic się nigdy nie zmieniało. Prawdziwe aplikacje zapamiętują zmieniające się rzeczy: liczbę polubień, otwarte menu, tekst w polu wyszukiwania. Ta pamięć nazywa się stanem.

React udostępnia komponentom stan za pomocą hooka useState:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    ...
}

Jedna linia, trzy elementy:

• count: bieżąca wartość
• setCount: funkcja, która ją zmienia
• useState(0): wartość początkowa

Złota zasada: nigdy nie przypisuj wartości bezpośrednio do stanu. count = 5 powoduje błąd, ponieważ count jest const. Nawet gdyby można było go zmienić, React by o tym nie wiedział. setCount(5) zmienia stan i ponownie renderuje komponent. To ponowne renderowanie aktualizuje ekran.