K čemu slouží direktiva useState?

useState je React hook, který umožňuje přidat stav do funkčních komponent. Vrací pole se dvěma prvky: aktuální hodnotou stavu a funkcí pro jeho aktualizaci. Při volání funkce aktualizace se komponenta znovu vykreslí s novou hodnotou.

Příklad použití:

import { useState } from 'react';

function Counter() {
  // 'count' je aktuální stav, 'setCount' je funkce pro jeho aktualizaci
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Čítač: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Zvýšit
      </button>
    </div>
  );
}

Hlavní vlastnosti:

• Přidává stav: Umožňuje používat stav v funkčních komponentách, dříve dostupný pouze ve třídách.
• Funkce aktualizace: Vrací speciální funkci pro změnu stavu.
• Re-render: Změna stavu přes funkci aktualizace způsobí znovu vykreslení komponenty.
• Primitivní a objekty: Může uchovávat jakýkoli typ dat: čísla, řetězce, boolean, objekty, pole.
• Líná inicializace: Počáteční hodnota může být funkce, která se spustí pouze při prvním vykreslení, což je užitečné pro nákladné výpočty.

const [data, setData] = useState(() => {
  // Nákladné výpočty se provedou pouze jednou
  const initialData = someExpensiveCalculation();
  return initialData;
});