Hooks personalizados en React: cómo crear los tuyos

Un hook personalizado es una función cuyo nombre empieza con use y que llama a otros hooks. Escribes uno cuando dos componentes necesitan la misma lógica con estado: mueves las llamadas a useState y useEffect a la función, devuelves lo que necesita el componente y la llamas desde cada componente.

import { useState } from 'react';

function useToggle(initial = false) {
    const [on, setOn] = useState(initial);
    const toggle = () => setOn((v) => !v);
    return [on, toggle];
}

function Spoiler({ title, children }) {
    const [open, toggle] = useToggle();
    return (
        <div style={{ marginBottom: 8 }}>
            <button onClick={toggle}>{open ? 'Hide' : 'Show'} {title}</button>
            {open && <p>{children}</p>}
        </div>
    );
}

export default function App() {
    return (
        <div>
            <Spoiler title="ending">The butler did it.</Spoiler>
            <Spoiler title="sequel">The butler did it again.</Spoiler>
        </div>
    );
}

Ambos spoilers llaman a useToggle, y abrir uno deja el otro cerrado. Cada llamada ejecuta su propio useState, así que cada componente recibe su propio valor. Un hook personalizado comparte lógica, no estado.

Las reglas para escribir uno

• El nombre empieza con use y una mayúscula: useToggle, useOnlineStatus. La regla de lint de los hooks usa el prefijo para encontrar las llamadas a hooks y comprobarlas.
• Llama al menos a un hook. Una utilidad que no llama a ningún hook es una función normal; llámala formatDate, no useFormatDate, para que se pueda llamar en cualquier lugar, incluso dentro de condiciones.
• Sigue las reglas de los hooks: llama a los hooks en su nivel superior, y llámalo solo desde componentes u otros hooks personalizados.
• Devuelve lo que resulte útil. Un array ([on, toggle]) es práctico cuando quienes lo llaman renombran los valores; un objeto ({ data, loading, error }) se lee mejor con tres o más.

useLocalStorage: estado que sobrevive a una recarga

useState lo olvida todo al recargar. Este hook lee el valor inicial de localStorage y vuelve a escribir cada cambio.

import { useState, useEffect } from 'react';

function readStored(key, fallback) {
    try {
        const raw = window.localStorage.getItem(key);
        return raw === null ? fallback : JSON.parse(raw);
    } catch {
        console.warn('localStorage is not available, keeping the value in memory');
        return fallback;
    }
}

function useLocalStorage(key, initial) {
    const [value, setValue] = useState(() => readStored(key, initial));

    useEffect(() => {
        try {
            window.localStorage.setItem(key, JSON.stringify(value));
        } catch {
            // Storage blocked or full: the value still works for this visit
        }
    }, [key, value]);

    return [value, setValue];
}

export default function App() {
    const [name, setName] = useLocalStorage('demo-name', '');
    return (
        <div>
            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" />
            <p>Hello, {name || 'stranger'}.</p>
        </div>
    );
}

La vista previa se ejecuta en un frame aislado donde el navegador bloquea localStorage, así que aquí verás el aviso en la consola y el hook vuelve a un estado normal. En una página normal el nombre sobrevive a una recarga. El try/catch no es solo para esta vista previa: los modos de navegación privada, las cookies bloqueadas y una cuota llena hacen que el almacenamiento lance errores también en apps reales. Pasar una función a useState significa que el almacenamiento se lee una sola vez, en el primer renderizado.

useDebounce: esperar a que el usuario deje de escribir

Una caja de búsqueda no debería lanzar una petición en cada pulsación. useDebounce devuelve una copia de un valor que solo se actualiza cuando lleva un tiempo determinado sin cambiar.

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
    const [debounced, setDebounced] = useState(value);

    useEffect(() => {
        const id = setTimeout(() => setDebounced(value), delay);
        return () => clearTimeout(id);
    }, [value, delay]);

    return debounced;
}

export default function App() {
    const [text, setText] = useState('');
    const query = useDebounce(text, 500);

    useEffect(() => {
        if (query) console.log('search for:', query);
    }, [query]);

    return (
        <div>
            <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Search" />
            <p>Typed: {text}</p>
            <p>Debounced: {query}</p>
        </div>
    );
}

Escribe una palabra rápido: Typed sigue cada tecla, Debounced se pone al día medio segundo después de que paras, y la consola registra una sola búsqueda. Cada pulsación cambia value, así que React ejecuta la limpieza (clearTimeout) antes de iniciar un temporizador nuevo. Cambia 500 por 0 y cada pulsación registra su propia búsqueda.

useWindowWidth: suscribirse con limpieza

Un hook que escucha al navegador debe quitar su listener cuando el componente desaparece, o cada montaje deja uno atrás.

import { useState, useEffect } from 'react';

function useWindowWidth() {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        const onResize = () => setWidth(window.innerWidth);
        window.addEventListener('resize', onResize);
        console.log('resize listener added');
        return () => {
            window.removeEventListener('resize', onResize);
            console.log('resize listener removed');
        };
    }, []);

    return width;
}

function WidthBadge() {
    const width = useWindowWidth();
    return <p>This frame is {width}px wide: {width < 500 ? 'narrow' : 'wide'} layout.</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Unmount' : 'Mount'} badge</button>
            {show && <WidthBadge />}
        </div>
    );
}

Cambia el tamaño de la ventana del navegador y el número lo sigue. Haz clic en el botón y la consola muestra que se quita el listener. Borra el return del efecto y luego monta y desmonta varias veces: obtienes una línea added cada vez y ninguna removed, así que los listeners viejos se acumulan. Para valores del navegador como este, useSyncExternalStore es el hook que React creó para esa tarea, y es bueno llamarlo dentro de un hook personalizado.

La lógica se comparte, el estado no

Dos componentes que llaman al mismo hook reciben dos copias separadas de todo lo que hay dentro. Eso sorprende a quienes esperan que un hook funcione como una variable global.

import { useState } from 'react';

function useCounter() {
    const [count, setCount] = useState(0);
    return [count, () => setCount((c) => c + 1)];
}

function Counter({ name }) {
    const [count, increment] = useCounter();
    return (
        <p>
            {name}: {count} <button onClick={increment}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter name="First" />
            <Counter name="Second" />
        </div>
    );
}

Haz clic en cualquiera de los botones y solo se mueve ese contador. Si ambos deben mostrar el mismo número, mueve el estado a App y pásalo hacia abajo, o ponlo en contexto. Un hook personalizado puede envolver ese estado compartido por comodidad (useCart() leyendo un CartContext), pero lo que comparte es el contexto, no el hook.

Cuándo escribir un hook personalizado

Extrae un hook cuando el mismo grupo de llamadas a hooks aparece en dos componentes, o cuando la lógica de efectos de un componente es tan larga que un nombre la explicaría mejor (useOnlineStatus() se lee mejor que veinte líneas de listeners). No envuelvas una sola llamada a useState en un hook solo para cambiarle el nombre, y no escribas hooks que solo llaman a useEffect para definir estado a partir de las props; calcula ese valor durante el renderizado.