¿Qué son useState y useEffect en React? La manera más fácil de aprender sobre estos dos hooks

¿Quieres aprender qué son useState y useEffect en React y cómo usarlos de la manera más fácil? Entonces sigue leyendo este post, donde te explicaré con ejemplos sencillos y prácticos lo que hacen estos dos hooks y por qué son tan importantes para el desarrollo de aplicaciones web con React.

useState es un hook que te permite crear y manejar estados en tus componentes funcionales de React. Un estado es una variable que almacena algún valor que puede cambiar a lo largo del tiempo y que afecta el comportamiento o la apariencia de tu componente. Por ejemplo, si tienes un botón que cambia de color al hacer clic en él, puedes usar un estado para guardar el color actual del botón y cambiarlo cada vez que el usuario lo presione.

Para usar useState, solo tienes que importarlo desde la librería de React y luego llamarlo dentro de tu componente funcional, pasándole como argumento el valor inicial del estado. useState te devolverá un arreglo con dos elementos: el primero es el valor actual del estado y el segundo es una función que te permite actualizar ese valor. Puedes asignar estos elementos a dos variables usando la sintaxis de desestructuración de arreglos. 

Por ejemplo:

js

import React, { useState } from 'react';

function Boton() {

// Crea un estado llamado color con el valor inicial 'rojo'

const [color, setColor] = useState('rojo');

// Define una función que cambia el color del estado cada vez que se llama

function cambiarColor() {

// Usa la función setColor para actualizar el valor del estado

// Si el color actual es 'rojo', lo cambia a 'verde', y viceversa

setColor(color === 'rojo' ? 'verde' : 'rojo');

}

// Retorna el elemento JSX que representa el botón

// Usa el valor del estado color para definir el estilo del botón

// Usa la función cambiarColor como manejador del evento onClick del botón

return (

<button style={{ backgroundColor: color }} onClick={cambiarColor}>

Haz clic aquí

</button>

);

}

```

Como puedes ver, cada vez que el usuario hace clic en el botón, se llama a la función cambiarColor, que usa la función setColor para cambiar el valor del estado color. Esto hace que se vuelva a renderizar el componente Boton con el nuevo valor del estado, lo que se refleja en el cambio de color del botón.

useEffect es otro hook que te permite ejecutar algún código cuando tu componente se monta, se actualiza o se desmonta. Esto es útil para realizar acciones secundarias o efectos secundarios (side effects) que dependen del estado o las props de tu componente, como por ejemplo: hacer peticiones a una API, suscribirse o cancelar suscripciones a eventos, modificar el DOM, etc.

Para usar useEffect, también tienes que importarlo desde la librería de React y luego llamarlo dentro de tu componente funcional, pasándole como argumento una función que contiene el código que quieres ejecutar. Esta función se llama función de efecto (effect function) y se ejecutará después de cada renderizado del componente. Además, puedes pasarle un segundo argumento a useEffect, que es un arreglo de dependencias (dependencies array), donde puedes especificar las variables que determinan si la función de efecto se debe ejecutar o no. Si no pasas este arreglo, la función de efecto se ejecutará siempre después de cada renderizado. Si pasas un arreglo vacío ([]), la función de efecto se ejecutará solo una vez, cuando el componente se monte. Si pasas un arreglo con algunas variables, la función de efecto se ejecutará solo cuando alguna de esas variables cambie su valor. Por ejemplo:

```js

import React, { useState, useEffect } from 'react';

function Reloj() {

// Crea un estado llamado hora con el valor inicial de la hora actual

const [hora, setHora] = useState(new Date().toLocaleTimeString());

// Define una función