Zašto se koristi direktiva useState?

useState je React hook koji omogućava dodavanje stanja u funkcionalne komponente. On vraća niz sa dva elementa: trenutnu vrednost stanja i funkciju za njegovo ažuriranje. Kada se pozove funkcija za ažuriranje, komponenta se ponovo renderuje sa novom vrednošću.

Primer upotrebe:

import { useState } from 'react';

function Counter() {
  // 'count' je trenutno stanje, 'setCount' je funkcija za njegovo ažuriranje
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Brojač: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Povećaj
      </button>
    </div>
  );
}

Glavne osobine:

• Dodaje stanje: Omogućava korišćenje stanja u funkcionalnim komponentama, ranije dostupno samo u klasama.
• Funkcija za ažuriranje: Vraća specijalnu funkciju za promenu stanja.
• Ponovno renderovanje: Promena stanja putem funkcije za ažuriranje izaziva ponovno renderovanje komponente.
• Primitivni i objekti: Može čuvati bilo koju vrstu podataka: brojeve, stringove, boolean, objekte, nizove.
• Leno inicijalizacija: Početna vrednost može biti funkcija koja se izvršava samo pri prvom renderovanju, korisno za skupe kalkulacije.

const [data, setData] = useState(() => {
  // Skupi kalkulacije se izvršavaju samo jednom
  const initialData = someExpensiveCalculation();
  return initialData;
});