A cosa serve la direttiva useState?

useState è un hook di React che permette di aggiungere stato ai componenti funzionali. Restituisce un array con due elementi: il valore corrente dello stato e una funzione per aggiornarlo. Quando si chiama la funzione di aggiornamento, il componente viene renderizzato di nuovo con il nuovo valore.

Esempio di utilizzo:

import { useState } from 'react';

function Counter() {
  // 'count' è lo stato corrente, 'setCount' è la funzione per aggiornarlo
  const [count, setCount] = useState(0);

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

Caratteristiche principali:

• Aggiunge stato: Permette di usare lo stato nei componenti funzionali, precedentemente disponibile solo nelle classi.
• Funzione di aggiornamento: Restituisce una funzione speciale per modificare lo stato.
• Re-render: La modifica dello stato tramite la funzione di aggiornamento provoca il re-render del componente.
• Primitivi e oggetti: Può contenere qualsiasi tipo di dato: numeri, stringhe, booleani, oggetti, array.
• Inizializzazione lazy: Il valore iniziale può essere una funzione che viene eseguita solo al primo render, utile per calcoli costosi.

const [data, setData] = useState(() => {
  // Calcoli costosi eseguiti una sola volta
  const initialData = someExpensiveCalculation();
  return initialData;
});