🛠️ Hooks personalizados en React para lógica reutilizable

🛠️ Hooks personalizados en React para lógica reutilizable

Los Hooks personalizados son funciones que permiten encapsular y reutilizar lógica de estado o efectos en React. Nos ayudan a mantener el código limpio y a evitar duplicación cuando necesitamos la misma funcionalidad en varios componentes.

---

1️⃣ Crear un Hook personalizado

Un Hook personalizado es simplemente una función que empieza con use y puede usar otros hooks de React como useState o useEffect.

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log("Contador actualizado:", contador);
  }, [contador]);

  const incrementar = () => setContador(c => c + 1);
  const decrementar = () => setContador(c => c - 1);

  return { contador, incrementar, decrementar };
}

export default useContadorInicial;
  

---

2️⃣ Usar un Hook personalizado en un componente

import React from "react";
import useContadorInicial from "./useContadorInicial";

function Contador() {
  const { contador, incrementar, decrementar } = useContadorInicial(5);

  return (
    <div>
      <h2>Contador: {contador}</h2>
      <button onClick={incrementar}>Incrementar</button>
      <button onClick={decrementar}>Decrementar</button>
    </div>
  );
}

export default Contador;
  

Contador: 5

---

3️⃣ Ventajas de los Hooks personalizados

• ✅ Reutilizan lógica compleja entre varios componentes.
• ✅ Mantienen los componentes más limpios y fáciles de leer.
• ✅ Facilitan pruebas unitarias de la lógica encapsulada.

---

4️⃣ Buenas prácticas

• ✅ Siempre empezar el nombre del hook con use.
• ✅ No llamar hooks condicionalmente; mantener el orden consistente.
• ✅ Retornar solo lo necesario: estado, funciones y objetos relacionados.

---

5️⃣ Resumen

Los Hooks personalizados son una poderosa herramienta para reutilizar lógica en React, mantener los componentes limpios y hacer tu código más modular y mantenible.

← Volver al índice