¿Cómo cambiar correctamente el estado de los…

El cambio de estado en React ocurre a través del método setState para componentes de clase o usando el hook useState para componentes funcionales.

Componentes de clase:

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

// Creamos un componente de clase
class MyComponent extends Component {
  // Inicializamos el estado
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Método para cambiar el estado
  incrementCount = () => {
    // Usamos setState
    this.setState({ count: this.state.count + 1 });
  };

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

// Exportamos el componente
export default MyComponent;

setState es asíncrono.
setState combina el nuevo estado con el actual (shallow merge).
setState puede aceptar una función que devuelve un nuevo estado basado en el anterior:

// Método para cambiar el estado usando una función
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Componentes funcionales (usando useState):

// Importamos React y useState
import React, { useState } from 'react';

// Creamos un componente funcional
function MyFunctionComponent() {
  // Inicializamos el estado con useState
  const [count, setCount] = useState(0); // [estado actual, función para actualizar]

  // Función para cambiar el estado
  const incrementCount = () => {
    // Usamos la función para actualizar el estado
    setCount(count + 1);
  };

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

// Exportamos el componente
export default MyFunctionComponent;

useState devuelve un array con dos elementos: el estado actual y la función para actualizarlo.
La función de actualización de estado que devuelve useState reemplaza el estado actual, no lo combina.
Se puede pasar una función a la función de actualización si el nuevo estado depende del anterior:

// Función para cambiar el estado usando una función
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Puntos importantes al cambiar el estado:

No modifiques el estado directamente: Nunca asignes un nuevo valor a la propiedad state directamente (por ejemplo, this.state.count = 5 o count = 5). React no detectará este cambio y el componente no se volverá a renderizar.
Cambio de objetos y arreglos: Al cambiar objetos o arreglos en el estado, siempre crea nuevas copias. React compara las referencias a objetos/arreglos, y si la referencia no cambia, React asume que los datos no han cambiado y no vuelve a renderizar.

// Cambio de objeto en componente de clase
this.setState(prevState => ({
  user: {
    ...prevState.user, // Copiamos las propiedades antiguas
    name: 'Nuevo nombre' // Actualizamos la propiedad necesaria
  }
}));

// Cambio de arreglo en componente funcional
setItems(prevItems => [...prevItems, 'Nuevo elemento']); // Añadimos un nuevo elemento

Asincronía de setState: Si necesitas realizar una acción después de que el estado se actualice y el componente vuelva a renderizarse, usa el segundo argumento de setState (una función de callback) o el hook useEffect en componentes funcionales.

// Callback en setState
this.setState({ count: this.state.count + 1 }, () => {
  console.log('¡Estado actualizado!');
});

// useEffect para reaccionar a cambios en el estado
useEffect(() => {
  console.log('El estado count cambió:', count);
}, [count]); // Dependencia: el hook se ejecuta al cambiar count

Comparación de métodos:

Característica	Componente de clase (`setState`)	Componente funcional (`useState`)
Sintaxis	Método `this.setState(newState[, callback])`	Hook `const [state, setState] = useState(initialState)`
Unión/Reemplazo	Combina el nuevo estado con el actual (shallow merge)	Reemplaza el estado actual con el nuevo
Asincronía	Es asíncrono	La función de actualización es asíncrona cuando se llama desde manejadores de eventos, pero síncrona cuando se llama dentro de la fase de render de React
Dependencia del estado previo	Pasar una función a `setState`: `this.setState(prevState => ({...}))`	Pasar una función a la función de actualización: `setState(prev => ({...}))`

¿Cómo cambiar correctamente el estado de los componentes en React?