🔗 Qué son los Hooks en React y cómo usarlos efectivamente

Los Hooks son una de las características más importantes introducidas en React 16.8. Permiten usar estado y otras funcionalidades de React sin necesidad de escribir clases. Gracias a ellos, el desarrollo de componentes se volvió más simple, limpio y reutilizable.

---

1️⃣ ¿Qué son los Hooks?

Un Hook es simplemente una función especial de React que te permite “engancharte” (hook into) a las características internas del framework, como el state o el lifecycle.

• ✅ Permiten usar estado en componentes funcionales.
• ✅ Reemplazan la necesidad de los componentes de clase.
• ✅ Facilitan la reutilización de lógica mediante Hooks personalizados.

---

2️⃣ Ejemplo básico: useState

El Hook useState permite añadir estado local a un componente funcional.

import React, { useState } from "react";

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <h3>Contador: {contador}</h3>
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
    </div>
  );
}

export default Contador;
  

Contador: 0

---

3️⃣ Hook useEffect: efectos secundarios

El Hook useEffect te permite realizar efectos secundarios en tus componentes, como llamadas a una API, temporizadores o manipulación del DOM.

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

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

  useEffect(() => {
    const intervalo = setInterval(() => {
      setHora(new Date().toLocaleTimeString());
    }, 1000);

    return () => clearInterval(intervalo); // Limpieza del efecto
  }, []);

  return <h3>Hora actual: {hora}</h3>;
}

export default Reloj;
  

🕒 Hora actual: --:--:--

---

4️⃣ Ventajas principales de los Hooks

• ✅ Menos código y más legible.
• ✅ Facilita la reutilización de lógica entre componentes.
• ✅ Evita el uso innecesario de clases y ciclos de vida complicados.
• ✅ Hace más sencilla la separación entre UI y lógica.

---

5️⃣ Hooks más usados en React

• useState → manejar estados locales.
• useEffect → manejar efectos secundarios.
• useContext → compartir datos globales.
• useRef → acceder a elementos o valores persistentes.
• useReducer → manejar estados complejos.
• useMemo y useCallback → optimización del rendimiento.

---

6️⃣ Buenas prácticas al usar Hooks

• 🚫 No los uses dentro de condicionales ni bucles.
• ✅ Decláralos siempre al inicio del componente.
• ✅ Nómbralos siempre con el prefijo use (ej: useAuth).
• ✅ Combínalos con Hooks personalizados para lógica compartida.

---

7️⃣ Resumen

Los Hooks revolucionaron el desarrollo con React al simplificar la forma de manejar estado y lógica de componentes. Son esenciales para construir aplicaciones modernas, limpias y escalables.

← Volver al índice