Estados Compuestos en Componentes de Clase con React

¿Cómo trabajar con estados compuestos en componentes de clase en React?

En clases anteriores aprendimos a manejar estados simples e independientes en React mediante el uso de useState. Sin embargo, cuando trabajamos con componentes de clase, podemos aprovechar estados compuestos para manejar múltiples propiedades dentro de un único objeto de estado. En esta guía, exploraremos cómo implementar y actualizar estos estados compuestos en React usando un componente de clase.

¿Qué es un estado compuesto?

Un estado compuesto en React es una estructura en la que todas las propiedades del estado se agrupan en un solo objeto. A diferencia de los estados simples, que se administran independientemente, los estados compuestos permiten combinar varias propiedades relacionadas y actualizarlas mediante un solo llamado a setState.

¿Cómo inicializamos un estado compuesto?

Al crear un componente de clase, utilizamos el constructor para inicializar el estado como un objeto que puede contener múltiples propiedades. Por ejemplo, en el siguiente código, iniciamos un estado con propiedades para un valor de entrada, loading y error.

class ClassState extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      loading: false,
      error: false,
    };
  }
  // resto del componente
}

¿Cómo actualizamos un estado compuesto?

Cuando tenemos un estado compuesto, no podemos usar métodos como setValue. En su lugar, utilizamos setState para actualizar las propiedades necesarias. Supongamos que deseamos actualizar la propiedad value desde un campo de entrada:

handleChange = (event) => {
  this.setState({ value: event.target.value });
}

¿Cómo manejamos eventos y validaciones?

El ciclo de vida y los eventos juegan un papel crucial al trabajar con componentes de clase. Para validar y actualizar múltiples propiedades del estado, como validar un código de seguridad:

componentDidUpdate(prevProps, prevState) {
  if (this.state.value !== prevState.value) {
    if (this.state.value === 'correctCode') {
      this.setState({ loading: false, error: false });
    } else {
      this.setState({ loading: false, error: true });
    }
  }
}

Aquí, utilizamos componentDidUpdate para observar cambios en los estados y aplicar las lógicas necesarias según el caso.

¿Cómo optimizar los estados compuestos?

El uso de desestructuración dentro de métodos como render puede simplificar el acceso a las propiedades del estado:

render() {
  const { value, loading, error } = this.state;
  return (
    <div>
      <input type="text" value={value} onChange={this.handleChange} />
      { loading ? <p>Cargando...</p> : null }
      { error ? <p>Error en el código</p> : null }
    </div>
  );
}

¿Cuáles son las ventajas de los estados compuestos?

• Eficiencia: Permite actualizar varias propiedades al mismo tiempo.
• Organización: Mejora la claridad al tener una sola fuente de estados aunque se manejen múltiples propiedades.
• Simplicidad: Reduce la necesidad de múltiples métodos de actualización, facilitando el mantenimiento y la legibilidad del código.

En nuestras próximas clases, aprenderemos cómo implementar estos conceptos utilizando React Hooks para componentes funcionales. ¡Sigue explorando y mejorando tus habilidades en React!