Gestione dello Stato con useState

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, lo 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 state. Si consiglia di utilizzare un nome di variabile 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 di state è mail, la funzione setState corrispondente sarà tipicamente chiamata setMail.

Esempio 1:

Costruzione del componente Counter, che manterrà il proprio stato. Quando si clicca sul pulsante Increment, lo stato verrà aggiornato e il componente verrà nuovamente renderizzato.

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: Importazione dell'hook useState dalla libreria React per utilizzarne la funzionalità;
• Riga 3: Definizione del componente Counter utilizzando la sintassi convenzionale della funzione;
• Riga 4: Inizializzazione dello 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 sul pulsante "increment". All'interno della funzione, si utilizza la funzione setCount per aggiornare lo stato;
• Righe 10-15: rendering del markup del componente. Alla riga 12 viene visualizzato il valore attuale dello stato (count). Il pulsante alla riga 13 utilizza l'attributo onClick per definire la funzione da eseguire al clic. In questo caso, viene passata la funzione increment.

Esempio 2:

Costruzione del componente Form con stato indipendente. Si chiede all'utente di inserire il proprio nome nel campo di input e, a seconda dell'input, verrà modificato 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 della funzione;
• Riga 4: Impostiamo lo stato iniziale usando l'hook useState;

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

• Righe 6-9: Questa funzione freccia JavaScript gestisce la logica per l'aggiornamento dello stato. Viene attivata quando un utente digita qualcosa nel campo. All'interno della funzione recuperiamo il valore dell'input tramite event.target.value. Utilizziamo poi 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 c'è una modifica nell'input.