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 corrente 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 state è mail, la funzione setState corrispondente sarà tipicamente chiamata setMail.

Esempio 1:

Costruzione del componente Counter, che manterrà il proprio stato interno. Quando si clicca sul pulsante Incrementa, 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 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 "incrementa". All'interno della funzione, si utilizza la funzione setCount per aggiornare lo stato;
• Righe 10-15: viene renderizzato il markup del componente. Alla riga 12 viene mostrato 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.

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: Si importa l'hook useState dalla libreria React per utilizzarne la funzionalità;
• Riga 3: Si definisce il componente Form utilizzando la sintassi standard per le funzioni;
• Riga 4: Si imposta 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 si recupera il valore dell'input tramite event.target.value. Si utilizza 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, si assegna userName come valore iniziale dell'input tramite l'attributo value;
2. Alla riga 16, si utilizza l'attributo onChange per specificare la funzione da chiamare quando si verifica una modifica nell'input.

Codice completo dell'app: