L'hook useState è un hook fondamentale di React che consente ai componenti funzionali di avere uno stato. Fornisce un modo per dichiarare e aggiornare variabili di stato all'interno di un componente.

Sintassi:

Per utilizzare l'hook useState, si richiama passando lo stato iniziale (initialState) come argomento. Restituisce un array con due elementi: il valore attuale dello stato (state) e una funzione (setState) per aggiornare lo stato.

const [state, setState] = useState(initialState);

• È possibile scegliere qualsiasi parola come nome per una variabile di stato state. Si consiglia di utilizzare un nome che descriva accuratamente quale stato viene memorizzato o aggiornato, come inputValue, page, number, name e così via;

• Allo stesso modo, quando si utilizza la funzione setState, si ha flessibilità nella scelta del nome della funzione. Tuttavia, seguire uno schema specifico è una convenzione standard: il nome della funzione setState dovrebbe iniziare con "set" seguito dal nome della variabile di stato corrispondente. Ad esempio, se la variabile state è mail, la funzione setState corrispondente sarà tipicamente chiamata setMail.

Nota

Quando si richiama setState, React esegue nuovamente il rendering del componente e aggiorna lo stato con il nuovo valore. È importante notare che, utilizzando useState, la variabile di stato non deve necessariamente essere un oggetto. Può essere un valore primitivo (come un numero, una stringa o un booleano) oppure un valore complesso (come un array o un oggetto).

Esempio 1:

Costruiamo il componente Counter, che manterrà il proprio stato. Quando si clicca sul pulsante Increment, aggiorneremo lo stato e attiveremo un nuovo rendering del componente.

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

In questo esempio, l'hook useState viene utilizzato per dichiarare una variabile di stato count con valore iniziale 0. La funzione setCount viene utilizzata per aggiornare la variabile count ogni volta che il pulsante viene cliccato.

Spiegazione riga per riga:

• Riga 1: Importiamo l'hook useState dalla libreria React per utilizzarne la funzionalità;
• Riga 3: Definiamo il componente Counter utilizzando la sintassi convenzionale della funzione;
• Riga 4: Inizializziamo lo stato tramite l'hook useState;

1. count rappresenta il valore del contatore. Il suo valore iniziale è 0, specificato tra parentesi in useState(0);
2. setCount è la funzione che aggiorna lo stato quando necessario.

• Righe 6-8: Questa funzione freccia JavaScript gestisce la logica di aggiornamento dello stato. Viene eseguita quando si clicca il pulsante "increment". All'interno della funzione, utilizziamo la funzione setCount per aggiornare lo stato;
• Righe 10-15: rende il markup del componente. Alla riga 12 viene visualizzato il valore corrente dello stato (count). Il pulsante alla riga 13 utilizza l'attributo onClick per definire la funzione da eseguire al clic. In questo caso, passiamo la funzione increment.

Codice completo dell'app:

Esempio 2:

Costruiamo il componente Form con il suo stato indipendente. Chiediamo all'utente di inserire il proprio nome nel campo di input e, a seconda del valore inserito, modificheremo il contenuto visualizzato.

import React, { useState } from "react";

const Form = () => {
  const [userName, setUserName] = useState("");

  const handleChange = (event) => {
    const inputValue = event.target.value;
    setUserName(inputValue);
  };

  return (
    <div>
      <input
        type="text"
        value={userName}
        onChange={handleChange}
        placeholder="Your name"
      />
      <p>Hello, {userName}!</p>
    </div>
  );
};

In questo esempio, l'hook useState viene utilizzato per dichiarare una variabile di stato userName con valore iniziale una stringa vuota. La funzione setUserName aggiorna la variabile userName ogni volta che è necessario.

Spiegazione riga per riga:

• Riga 1: Importiamo l'hook useState dalla libreria React per utilizzarne la funzionalità;
• Riga 3: Definiamo il componente Form utilizzando la sintassi standard function;
• Riga 4: Impostiamo lo stato iniziale tramite l'hook useState;

1. userName rappresenta il valore del campo di input, inizialmente impostato come stringa vuota (""), specificata tra parentesi in useState("");
2. setUserName è la funzione che consente di aggiornare lo stato quando necessario.

• Righe 6-9: Questa funzione freccia JavaScript gestisce la logica per l'aggiornamento dello stato. Viene attivata quando l'utente digita qualcosa nel campo. All'interno della funzione recuperiamo il valore dell'input tramite event.target.value. Utilizziamo quindi la funzione setUserName per aggiornare lo stato con il valore del campo di input;
• Righe 11-21: Viene renderizzato il markup del componente.

1. Alla riga 15, assegniamo userName come valore iniziale per l'input tramite l'attributo value;
2. Alla riga 16, utilizziamo l'attributo onChange per specificare la funzione da chiamare quando avviene una modifica nell'input.

Codice completo dell'app: