Creando tu propio hook

El problema: lógica repetida

Imagina que en tres componentes diferentes necesitas un toggle (un booleano que alterna entre true y false). En cada uno escribes:

Son solo dos líneas, pero se repiten en cada componente. Y si la lógica fuera más compleja (como un fetch con loading/error), estarías copiando 10-15 líneas idénticas.

Custom hooks al rescate

Un hook personalizado es una función que:

1. Empieza con use (convención obligatoria)
2. Usa otros hooks dentro (useState, useEffect, etc.)
3. Devuelve lo que necesiten los componentes que lo usen

Ahora en cualquier componente:

Estado NO compartido

Un detalle crucial: los custom hooks comparten lógica, no estado. Si dos componentes usan useToggle, cada uno tiene su propia copia independiente del estado.

Ejemplo: useLocalStorage

Un hook que sincroniza el estado con localStorage:

Uso:

Ejemplo: useFetch

Uso:

Compara esto con escribir useState + useEffect + fetch en cada componente que necesita datos. El custom hook reduce todo a una sola línea.

Convenciones

• El nombre siempre empieza con use: useToggle, useFetch, useLocalStorage
• Un archivo por hook: useToggle.js, useFetch.js
• Devuelve lo que el componente necesite: un array, un objeto, o un valor simple
• Si devuelves un array: [valor, setter] (como useState)
• Si devuelves un objeto: { data, loading, error } (como useFetch)

Tu desafío 🚀

1. En useToggle.js, completa el hook: usa useState, crea las funciones toggle, setTrue, setFalse, y devuelve [value, toggle, setTrue, setFalse]
2. En App.js, importa y usa useToggle para controlar la visibilidad de un panel

Los custom hooks son el mecanismo de abstracción de React. Con ellos, extraes patrones, reduces duplicación y creas tu propia librería de herramientas reutilizables.