Na čo sa používa direktíva useState?

useState je React hook, ktorý umožňuje pridanie stavu do funkčných komponentov. Vráti pole so dvoma prvkami: aktuálnou hodnotou stavu a funkciou na jeho aktualizáciu. Pri volaní funkcie na aktualizáciu sa komponent znovu vykreslí s novou hodnotou.

Príklad použitia:

import { useState } from 'react';

function Counter() {
  // 'count' je aktuálny stav, 'setCount' je funkcia na jeho aktualizáciu
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Počítadlo: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Zvýšiť
      </button>
    </div>
  );
}

Hlavné vlastnosti:

• Pridáva stav: Umožňuje používať stav v funkčných komponentoch, predtým dostupný iba v triedach.
• Funkcia na aktualizáciu: Vráti špeciálnu funkciu na zmenu stavu.
• Znovu vykreslí: Zmena stavu cez funkciu na aktualizáciu spôsobí znovu vykreslenie komponentu.
• Primitívy a objekty: Môže ukladať akýkoľvek typ dát: čísla, reťazce, boolean, objekty, polia.
• Lazí inicializácia: Počiatočná hodnota môže byť funkcia, ktorá sa vykoná iba pri prvom vykreslení, čo je užitočné pre nákladné výpočty.

const [data, setData] = useState(() => {
  // Nákladné výpočty sa vykonajú iba raz
  const initialData = someExpensiveCalculation();
  return initialData;
});