Gestione dello Stato con useState

L'hook useState è un hook fondamentale di React che consente ai componenti funzionali di gestire 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 di state e una funzione setState per aggiornare lo stato.

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

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

• Analogamente, quando si utilizza la funzione setState, si ha flessibilità nella scelta del nome. Tuttavia, seguire una convenzione specifica è standard: il nome della funzione setState dovrebbe iniziare con "set" seguito dal nome della variabile di state. Ad esempio, se la variabile di mail è setState, la funzione corrispondente sarà setMail.

Esempio 1:

Costruiamo il componente Counter, che manterrà il proprio stato. Quando il pulsante Increment viene cliccato, 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: 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 per l'aggiornamento dello stato. Viene eseguita quando si clicca il pulsante "increment". 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 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, viene passata la funzione increment.

Codice completo dell'app:

Esempio 2:

Costruzione del componente Form con stato indipendente. L'utente viene invitato a inserire il proprio nome nel campo di input e, in base all'input fornito, il contenuto visualizzato verrà modificato.

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 stringa vuota. La funzione setUserName aggiorna la variabile userName ogni volta che è necessario.

Spiegazione riga per riga:

• Riga 1: Importazione dell'hook useState dalla libreria React per utilizzarne la funzionalità;
• Riga 3: Definizione del componente Form utilizzando la sintassi standard function;
• Riga 4: Impostazione dello 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 di aggiornamento dello stato. Viene attivata quando l'utente digita qualcosa nel campo. Il valore dell'input viene recuperato all'interno della funzione tramite event.target.value. Si utilizza 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, viene assegnato userName come valore iniziale dell'input tramite l'attributo value;
2. Alla riga 16, viene utilizzato l'attributo onChange per specificare la funzione da chiamare quando si verifica una modifica nell'input.

Codice completo dell'app: