Para manejar el estado en React, se utilizan diferentes métodos dependiendo de si estás trabajando con componentes funcionales o componentes de clase. useState es el hook usado para manejar el estado en componentes funcionales, mientras que setState es el método tradicional usado en componentes de clase.

Uso de useState en Componentes Funcionales

useState es un hook que te permite añadir estado a componentes funcionales en React. Puedes declarar múltiples estados llamando a useState varias veces.

Sintaxis Básica:

jsx

• estado: La variable que contiene el valor del estado.
• setEstado: La función utilizada para actualizar el estado.
• valorInicial: El valor inicial del estado.

Ejemplo Simple:

jsx

En este ejemplo:

• Inicializamos count en 0 usando useState(0).
• Actualizamos el estado llamando a setCount cuando se hace clic en el botón.

Uso de setState en Componentes de Clase

setState es el método usado para actualizar el estado en componentes de clase. A diferencia de useState, setState realiza una fusión superficial de objetos, lo que facilita la actualización parcial del estado.

Sintaxis Básica:

jsx

• partialState: Un objeto parcial que representa los cambios en el estado.
• callback: (Opcional) Una función que se ejecuta después de que el estado ha sido actualizado.

Ejemplo Simple:

jsx

En este ejemplo:

• Inicializamos count en 0 en el constructor del componente.
• Actualizamos el estado llamando a this.setState con el estado parcial.

Diferencias Clave

1. Sintaxis y Uso:

   • useState es específico para componentes funcionales.
   • setState es específico para componentes de clase.

2. Manejo de Estado:

   • useState es más sencillo y permite manejar múltiples estados localizados.
   • setState realiza una fusión superficial, facilitando la actualización de objetos anidados.

3. Actualizar Estado:

   • useState devuelve una nueva copia del estado.
   • setState puede actualizar parcialmente el estado.

Ejemplo Práctico: Formulario Controlado

Componente Funcional:

jsx

Componente de Clase:

jsx

Imagen Explicativa

Al comprender el uso de useState y setState, puedes manejar eficientemente el estado en tus componentes React, ya sea que prefieras usar componentes funcionales o de clase. En la próxima sección, exploraremos el Manejo de Eventos y Actualización del Estado, que es crucial para crear aplicaciones React interactivas.