Come modificare correttamente lo stato dei componenti…

Il cambiamento di stato in React avviene tramite il metodo setState per i componenti di classe o usando l'hook useState per i componenti funzionali.

Componenti di classe:

// Importiamo React
import React, { Component } from 'react';

// Creiamo un componente di classe
class MyComponent extends Component {
  // Inizializziamo lo stato
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Metodo per modificare lo stato
  incrementCount = () => {
    // Usare setState
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Contatore: {this.state.count}</p>
        <button onClick={this.incrementCount}>Aumenta</button>

      </div>
    );
  }
}

// Esportiamo il componente
export default MyComponent;

setState è asincrono.
setState combina il nuovo stato con quello attuale (shallow merge).
setState può accettare una funzione che restituisce un nuovo stato basato sul precedente:

// Metodo per modificare lo stato usando una funzione
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Componenti funzionali (con useState):

// Importiamo React e useState
import React, { useState } from 'react';

// Creiamo un componente funzionale
function MyFunctionComponent() {
  // Inizializziamo lo stato con useState
  const [count, setCount] = useState(0); // [stato attuale, funzione di aggiornamento]

  // Funzione per modificare lo stato
  const incrementCount = () => {
    // Usare la funzione di aggiornamento
    setCount(count + 1);
  };

  return (
    <div>
      <p>Contatore: {count}</p>
      <button onClick={incrementCount}>Aumenta</button>
    </div>
  );
}

// Esportiamo il componente
export default MyFunctionComponent;

useState restituisce un array di due elementi: lo stato attuale e la funzione per aggiornarlo.
La funzione di aggiornamento dello stato, restituita da useState, sostituisce lo stato attuale, non lo unisce.
È possibile passare una funzione alla funzione di aggiornamento se il nuovo stato dipende dal precedente:

// Funzione per modificare lo stato usando una funzione
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Punti importanti nel modificare lo stato:

Non modificare direttamente lo stato: Mai assegnare un nuovo valore alla proprietà state direttamente (ad esempio, this.state.count = 5 o count = 5). React non rileverà questa modifica e il componente non si renderizzerà di nuovo.
Modifica di oggetti e array: Quando si modificano oggetti o array nello stato, creare sempre nuove copie. React confronta i riferimenti agli oggetti/array, e se il riferimento non cambia, React presume che i dati non siano cambiati e non esegue il rendering.

// Modifica di un oggetto in un componente di classe
this.setState(prevState => ({
  user: {
    ...prevState.user, // Copia delle vecchie proprietà
    name: 'Nuovo nome' // Aggiorna la proprietà necessaria
  }
}));

// Modifica di un array in un componente funzionale
setItems(prevItems => [...prevItems, 'Nuovo elemento']); // Aggiungi un nuovo elemento

Asincronia di setState: Se si desidera eseguire un'azione dopo che lo stato è stato aggiornato e il componente si è renderizzato di nuovo, usare il secondo argomento di setState (una funzione di callback) o l'hook useEffect nei componenti funzionali.

// Callback in setState
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Stato aggiornato!');
});

// useEffect per reagire al cambiamento di stato
useEffect(() => {
  console.log('Lo stato count è cambiato:', count);
}, [count]); // Dipendenza: il hook si attiverà al cambiamento di count

Confronto tra metodi:

Caratteristica	Componente di classe (`setState`)	Componente funzionale (`useState`)
Sintassi	Metodo `this.setState(newState[, callback])`	Hook `const [state, setState] = useState(initialState)`
Unione/Sostituzione	Unisce il nuovo stato con quello attuale (shallow merge)	Sostituisce lo stato attuale con quello nuovo
Asincronia	Asincrono	La funzione di aggiornamento è asincrona quando chiamata da gestori di eventi, ma sincrona durante il ciclo di rendering di React
Dipendenza dal precedente stato	Passare una funzione a `setState`: `this.setState(prevState => ({...}))`	Passare una funzione a `setState`: `setState(prev => ({...}))`

Come modificare correttamente lo stato dei componenti in React?