Do czego służy dyrektywa useState?

useState to hook React, który pozwala dodawać stan do komponentów funkcyjnych. Zwraca tablicę z dwoma elementami: aktualną wartością stanu i funkcją do jej aktualizacji. Wywołanie funkcji aktualizacji powoduje ponowne renderowanie komponentu z nową wartością.

Przykład użycia:

import { useState } from 'react';

function Counter() {
  // 'count' to aktualny stan, 'setCount' to funkcja do jego aktualizacji
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Licznik: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Zwiększ
      </button>
    </div>
  );
}

Główne cechy:

• Dodaje stan: Pozwala używać stanu w komponentach funkcyjnych, wcześniej dostępnego tylko w klasach.
• Funkcja aktualizacji: Zwraca specjalną funkcję do zmiany stanu.
• Ponowne renderowanie: Zmiana stanu przez funkcję aktualizacji powoduje ponowne renderowanie komponentu.
• Prymitywy i obiekty: Może przechowywać dowolne typy danych: liczby, łańcuchy, wartości logiczne, obiekty, tablice.
• Leniwa inicjalizacja: Wartość początkowa może być funkcją, która jest wykonywana tylko przy pierwszym renderze, co jest przydatne przy kosztownych obliczeniach.

const [data, setData] = useState(() => {
  // Kosztowne obliczenia wykonywane tylko raz
  const initialData = someExpensiveCalculation();
  return initialData;
});