Pentru ce este folosită directiva useState?

useState — este un hook React care permite adăugarea de stare în componentele funcționale. Returnează un array cu două elemente: valoarea curentă a stării și o funcție pentru actualizarea acesteia. La apelarea funcției de actualizare, componenta se re-renderizează cu noua valoare.

Exemplu de utilizare:

import { useState } from 'react';

function Counter() {
  // 'count' este starea curentă, 'setCount' este funcția pentru actualizare
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Contor: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Crește
      </button>
    </div>
  );
}

Caracteristici principale:

• Adaugă stare: Permite utilizarea stării în componente funcționale, anterior disponibilă doar în clase.
• Funcție de actualizare: Returnează o funcție specială pentru modificarea stării.
• Re-renderizare: Modificarea stării prin funcția de actualizare determină re-renderizarea componentei.
• Primitivi și obiecte: Poate stoca orice tip de date: numere, șiruri, valori booleene, obiecte, array-uri.
• Inițializare leneșă: Valoarea inițială poate fi o funcție care se execută doar la primul render, utilă pentru calcule costisitoare.

const [data, setData] = useState(() => {
  // Calcul costisitor executat o singură dată
  const initialData = someExpensiveCalculation();
  return initialData;
});