Ahora que hemos introducido la importancia del manejo de estado en React, es crucial entender sus fundamentos. Esta sección cubrirá los conceptos centrales que sustentan cómo React maneja el estado y cómo puedes utilizarlo eficientemente en tus aplicaciones.

¿Qué es el Estado?

El estado es una representación de los datos internos de un componente que pueden cambiar a lo largo del ciclo de vida del componente. Cada componente en React puede mantener su propio estado local. Cuando el estado de un componente cambia, React se encarga de actualizar el DOM de manera eficiente para reflejar dichos cambios.

Propiedades del Estado

1. Inicialización del Estado:

El estado puede ser inicializado en el constructor de un componente de clase o mediante hooks en componentes funcionales.

Ejemplo en Componente de Clase:

jsx

Ejemplo en Componente Funcional:

jsx

2. Actualización del Estado:

El estado debe ser actualizado mediante funciones específicas (setState para clases, useState setters para funciones) para asegurar que React sepa cuándo re-renderizar el componente.

Ejemplo:

jsx

3. Inmutabilidad del Estado:

El estado debe tratarse como inmutable. Nunca se debe modificar directamente el estado, sino crearse y establecerse una nueva copia del estado.

Ciclo de Vida de Componentes de Clase relacionado con el Estado

En componentes de clase, hay varios métodos del ciclo de vida que manejan el estado:

1. componentDidMount(): Llamado una vez que el componente ha sido montado. Ideal para inicializar estado que dependa de datos externos.
2. componentDidUpdate(prevProps, prevState): Llamado después de que el componente ha sido actualizado. Permite comparar el estado anterior con el actual.
3. componentWillUnmount(): Llamado justo antes de desmontar el componente. Útil para limpiar recursos.

Ejemplo Práctico: Temporizador

Veamos un ejemplo de un temporizador, primero en un componente de clase y luego en un componente funcional.

Componente de Clase:

jsx

Componente Funcional:

jsx

Imagen Explicativa

Al entender estos fundamentos, podrás manejar el estado de cualquier componente en React de manera más clara y efectiva. En la próxima sección, exploraremos las diferencias entre el Estado Local y el Estado Global y cuándo usar cada uno.