Czym jest stan?

Do tej pory wszystko było zamrożone: dane trafiały do środka, powstawała strona i nic się nigdy nie zmieniało. Prawdziwe aplikacje pamiętają rzeczy, które się zmieniają: 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

Najważniejsza zasada: nigdy nie przypisuj wartości bezpośrednio do stanu. count = 5 zmienia zmienną, której React nie obserwuje. setCount(5) zmienia stan i ponownie renderuje komponent. To ponowne renderowanie aktualizuje ekran.