Crea tu primer custom hook en React

Reutilizar lógica en React deja de ser un dolor de cabeza cuando aprendes a crear un custom hook. Si ya tienes un contador con useState y quieres usarlo en varios componentes sin repetir código, un hook personalizado es la solución más limpia y escalable. Esta guía te muestra cómo construir useCounter paso a paso.

Qué es un custom hook y por qué lo necesitas

Un custom hook es una función que encapsula lógica con estado para que puedas reutilizarla en cualquier componente. En lugar de duplicar el mismo useState y las mismas funciones de incrementar o decrementar en cada archivo, centralizas todo en un solo lugar.

¿Qué es un custom hook en React? Es una función que empieza con la palabra use y reutiliza lógica de hooks como useState o useEffect. Te permite extraer comportamiento repetido y aplicarlo en varios componentes sin duplicar código.

La convención de nombrar los hooks con el prefijo use no es opcional: React la usa para identificar que se trata de un hook y aplicar sus reglas internas [02:15]. Por eso useState, useEffect y useReducer siguen ese patrón, y tu hook personalizado también debe hacerlo.

Cómo estructurar el proyecto antes de crear el hook

Antes de escribir el hook, organiza tus carpetas. Esto te ahorra confusión cuando el proyecto crezca.

• Crea una carpeta llamada CounterWithCustomHook con su archivo .jsx para el componente que consumirá el hook.
• Crea una carpeta Hooks dentro de src para alojar todos tus hooks personalizados.
• Dentro de Hooks, crea el archivo useCounter.jsx.
• Importa el componente en App y mantén el Provider de clases anteriores envolviendo la estructura.

Con esa base lista, ya puedes empezar a escribir el hook sin mezclar responsabilidades.

Cómo construir el custom hook useCounter paso a paso

El hook es solo una función que recibe un parámetro inicial y devuelve estado más funciones. Lo importante es mantenerlo parametrizable para que sea verdaderamente reutilizable.

Por qué pasar un valor inicial como parámetro

Si escribes useState(0) directamente, pierdes flexibilidad. Cualquier componente que use el hook estará obligado a empezar en cero. La solución es recibir initialValue como argumento de la función [04:30].

jsx import { useState } from "react";

function useCounter(initialValue = 0) { const [count, setCount] = useState(initialValue);

const increment = () => setCount((prev) => prev + 1); const decrement = () => setCount((prev) => prev - 1); const reset = () => setCount(initialValue);

return { count, increment, decrement, reset }; }

export default useCounter;

Fíjate en el detalle: initialValue = 0 define un valor por defecto, pero quien consuma el hook puede mandar el número que quiera. Esa es la verdadera ventaja del custom hook.

Cómo retornar funciones y estado correctamente

Retornar un objeto con count, increment, decrement y reset te permite desestructurar solo lo que necesitas en cada componente. Si solo te interesa el contador y el reset, los tomas y listo. Esa flexibilidad no la tendrías retornando un array.

¿Por qué usar prev dentro de setCount? Porque garantiza que actualizas el estado basándote en el valor más reciente, evitando bugs cuando hay múltiples actualizaciones seguidas.

Cómo consumir el hook en un componente

Usar el hook se siente exactamente igual que usar useState. Importas la función desde la carpeta Hooks y desestructuras lo que retorna.

jsx import useCounter from "../Hooks/useCounter";

function CounterWithCustomHook() { const { count, increment, decrement, reset } = useCounter(10);

return ( <> <p>Contador: {count}</p> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> <button onClick={reset}>Reset</button> </> ); }

export default CounterWithCustomHook;

Al pasar 10 como argumento, el contador arranca en diez y el botón de reset siempre regresa a ese mismo valor. Si en otro componente necesitas un contador que empiece en 100, simplemente llamas useCounter(100). Mismo hook, comportamiento personalizado.

Qué error común vas a encontrar al renderizar

React exige que un componente retorne un solo nodo padre. Si pones el párrafo y los botones sueltos, verás errores en rojo. La solución rápida es envolver todo en un fragment (<>...</>) o en un div.

¿Cuándo conviene crear un custom hook? Cuando detectas que dos o más componentes comparten la misma lógica de estado. Si solo un componente necesita esa lógica, un useState normal es suficiente.

Qué ganas al adoptar este patrón

La diferencia entre repetir useState por todos lados y centralizarlo en useCounter se nota cuando el proyecto crece:

• Mantienes la lógica en un solo archivo, así que un cambio se refleja en todos los componentes.
• Reduces errores por copiar y pegar mal una función.
• Tu código se vuelve más legible porque los componentes solo describen UI, no lógica de estado.
• Puedes testear el hook de forma aislada sin depender de un componente específico.

Los custom hooks son la puerta de entrada para escribir React de forma profesional. Una vez que internalizas el patrón con algo simple como un contador, puedes aplicar la misma idea a llamadas a APIs, formularios, autenticación o cualquier lógica que se repita.

¿Ya pensaste en qué lógica de tu proyecto actual podrías mover a un custom hook? Cuéntame en los comentarios qué hook personalizado vas a crear primero.