Kokia yra useState direktyvos paskirtis?

useState — tai React kabliukas, leidžiantis pridėti būseną prie funkcinių komponentų. Jis grąžina masyvą su dviem elementais: dabartine būsenos reikšme ir funkcija ją atnaujinti. Iškvietus atnaujinimo funkciją, komponentas perrenderinamas su nauja reikšme.

Naudojimo pavyzdys:

import { useState } from 'react';

function Counter() {
  // 'count' yra dabartinė būsena, 'setCount' — funkcija ją atnaujinti
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Skaitiklis: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Padidinti
      </button>
    </div>
  );
}

Pagrindinės savybės:

• Prideda būseną: leidžia naudoti būseną funkciniuose komponentuose, anksčiau prieinama tik klasėse.
• Atnaujinimo funkcija: grąžina specialią funkciją būsenos keitimui.
• Perrenderinimas: Būsenos keitimas per atnaujinimo funkciją sukelia komponento perrenderinimą.
• Primitives ir objektai: gali saugoti bet kokio tipo duomenis: skaičius, eilutes, boolean, objektus, masyvus.
• Lėtas inicializavimas: Pradinė reikšmė gali būti funkcija, kuri vykdoma tik pirmojo renderio metu, naudinga brangiems skaičiavimams.

const [data, setData] = useState(() => {
  // Brangūs skaičiavimai vykdomi tik kartą
  const initialData = someExpensiveCalculation();
  return initialData;
});