Para comprender completamente el Context API de React, primero debemos tener una base sólida en los fundamentos del estado en React. El estado es una característica esencial en React, ya que permite a los componentes mantener y gestionar datos cambiantes a lo largo del ciclo de vida de la aplicación.

¿Qué es el Estado?

El estado es un objeto que contiene datos o propiedades que un componente puede manejar y renderizar dinámicamente. A diferencia de las props, que son invariables y se pasan desde un componente padre, el estado es mutable y está gestionado internamente por el componente.

Inicializando el Estado

En los componentes funcionales, el estado se gestiona usando el Hook useState. En los componentes de clase, el estado se inicializa en el constructor.

Ejemplo en Componente Funcional

jsx

En este ejemplo, useState se utiliza para declarar una variable de estado llamada count y una función setCount para actualizar ese estado.

Ejemplo en Componente de Clase

jsx

Aquí, el estado se inicializa en el constructor y se actualiza utilizando this.setState dentro del método increment.

Actualización del Estado

La actualización del estado es una parte crucial de React, ya que desencadena una nueva renderización del componente para reflejar los cambios. Es importante notar que la actualización del estado en React es asíncrona.

Consideraciones al Actualizar el Estado

1. No Modificar Directamente el Estado: Siempre utiliza la función de actualización (setState o useState) para cambiar el estado. Modificarlo directamente no desencadenará una nueva renderización.

jsx

2. Combinar Actualizaciones de Estado: Cuando el nuevo estado depende del estado anterior, utiliza la función de actualización del estado que recibe el estado previo como argumento.

jsx

Estado vs. Props

• Estado: Gestionado internamente por el componente, mutable y utilizado para almacenar información que puede cambiar durante el ciclo de vida del componente.
• Props: Pasadas desde el componente padre, inmutables y utilizadas para configurar el componente.

Ejemplo Combinado

A continuación, un ejemplo que muestra cómo un componente puede manejar tanto el estado como las props.

jsx

En este ejemplo, el componente Greeting recibe una prop name y maneja un estado greeting.

Conclusión

Entender cómo funciona el estado en React es fundamental para trabajar efectivamente con el Context API. El estado permite a los componentes gestionar datos que pueden cambiar a lo largo del tiempo, y es básico para crear aplicaciones interactivas y dinámicas. En el próximo capítulo, profundizaremos en cómo crear un contexto en React.