Mit használ a useState direktíva?

A useState egy React hook, amely lehetővé teszi az állapot hozzáadását funkcionális komponensekhez. Két elemből álló tömböt ad vissza: az aktuális állapotértéket és egy függvényt az állapot frissítésére. Az állapotfrissítő függvény hívásakor a komponens újra renderelődik az új értékkel.

Használati példa:

import { useState } from 'react';

function Counter() {
  // 'count' az aktuális állapot, 'setCount' az állapot frissítésére szolgáló függvény
  const [count, setCount] = useState(0);

  return (
    <div>
      <p Számláló: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Növel
      </button>
    </div>
  );
}

Fő jellemzők:

• Állapot hozzáadása: Lehetővé teszi az állapot használatát funkcionális komponensekben, korábban csak osztályokban volt elérhető.
• Frissítő függvény: Egy speciális függvényt ad vissza az állapot módosítására.
• Újrarenderelés: Az állapot módosítása az állapotfrissítő függvényen keresztül újrarenderelést vált ki.
• Primitív típusok és objektumok: Bármilyen adatot tárolhat: számokat, szövegeket, booleanokat, objektumokat, tömböket.
• Lusta inicializálás: A kezdeti érték lehet egy függvény, amely csak az első rendereléskor fut le, hasznos drága számításokhoz.

const [data, setData] = useState(() => {
  // Drága számítások csak egyszer futnak
  const initialData = someExpensiveCalculation();
  return initialData;
});