Introducción React Hooks

Los Hooks en React son funciones que permiten usar el estado y otras características de React sin escribir una clase dentro de tus componentes. Se introdujeron en React 16.8 (Febrero 16 de 2019) y revolucionaron la forma en que se construyen componentes al eliminar la necesidad de usar clases en la mayoría de los casos.

¿Por qué existen los Hooks?

Antes de los Hooks, los componentes funcionales eran stateless y solo servían para renderizar UI estática. Si necesitábamos manejar estado o ciclos de vida, debíamos usar clases. Los Hooks se crearon para solucionar varios problemas que existían con los componentes de clase:

1. Dificultad para reutilizar lógica de estado: No había una forma sencilla de reutilizar lógica de estado entre componentes. Esto llevaba a la duplicación de código y dificultaba el mantenimiento de las aplicaciones.
2. Componentes complejos y difíciles de entender: Los componentes de clase podían volverse muy complejos a medida que crecían, lo que dificultaba su comprensión y mantenimiento.
3. Dificultad con el this: En clases, el this a menudo causaba errores si no se entendía bien su comportamiento.

Los Hooks resuelven esto permitiendo usar estado, efectos secundarios y más, directamente dentro de funciones.

📌 useState - Manejo de Estado en Componentes Funcionales

🧐 ¿Qué es useState?

useState es un Hook de React que permite manejar estado local dentro de un componente funcional. Esto te permite “recordar” información, como lo es el valor de input en un formulario. Antes de los Hooks, solo los componentes de clase podían tener estado, pero ahora los componentes funcionales pueden gestionar estados sin necesidad de clases. ¿Cómo se ve esto en código? 👨‍💻

💡 useState nos pide definir una variable en la que se guarda el valor del estado y una variable que guarda una función para actualizar el estado. Al definir nuestro estado, podemos pasar en la declaración un valor por default.

Por ejemplo:

const [var_valor, var_actualizar_valor] = useState("mi valor por default")

📖 Sintaxis Básica

import { useState } from "react";

function Contador() {
  // contador: Contiene el valor actual del estado.
  // setContador: Función para actualizar el estado.
  // Inicializa el estado con 0 - useState(0)
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Contador: {contador}</p>
      {/*Cambia el estado al hacer clic.*/}
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
    </div>
  );
}

🛠 Ejemplo: Alternar un boolean (Modo oscuro)

Podemos usar useState para manejar valores booleanos.

import { useState } from "react";

function ModoOscuro() {
  const [modoOscuro, setModoOscuro] = useState(false);

  const theme = modoOscuro ? "bg-black text-white p-4" : "bg-white text-black p-4"
  return (
    <div className={theme}>
      <p>Modo: {modoOscuro ? "Oscuro" : "Claro"}</p>
      <button onClick={() => setModoOscuro(!modoOscuro)}>Cambiar Modo</button>
    </div>
  );
}

💡 Nuestro estado es modoOscuro, este contiene un valor booleano y cada vez que damos click en el botón cambiar Modo, le definimos el valor contrario al que ya tiene con la sentencia !modoOscuro, es decir que si tenia true pasa a false o al contrario. Nuestro estilo (theme) se define dependiendo el valor que tiene nuestro variable estado modoOscuro.

⚠️ Cosas a tener en cuenta

• Los cambios de estado son asíncronos, es decir que setState no actualiza el estado de inmediato, sino que React programa el cambio y actualiza el estado en un futuro re-render.
• Si necesitas basarte en el estado anterior, usa una función y captura el valor anterior, como:
  setContador(prev => prev + 1)
• React no re-renderiza si el nuevo estado es igual al anterior.
• El estado puede ser cualquier tipo de dato: números, strings, booleanos, objetos, arreglos, e incluso null o undefined.

Espero que este post te haya ayudado a comprender mejor los Hooks y, en especial, useState. En los próximos artículos exploraremos más Hooks y cómo crear los tuyos propios.

Si crees que esta información puede ser útil para alguien, ¡compártela! 🚀