useHooks (@uidotdev/usehooks)
Para añadir hooks de React listos para usar (localStorage, debounce, media query...) sin reimplementarlos.
Colección de hooks de React modernos y seguros en servidor, del equipo de ui.dev.
Notas y contexto
Qué es
useHooks es una colección de hooks de React modernos y seguros en servidor mantenida por el equipo de ui.dev, conocido por su plataforma de formación en React. Se distribuye como paquete npm bajo el nombre @uidotdev/usehooks e incluye más de 40 hooks listos para usar. La librería está pensada para React 18 o superior y se publica con licencia MIT.
Para qué sirve
- Reutilizar lógica común de React sin reescribirla: persistencia en localStorage, debounce, media queries o detección de clics fuera de un elemento.
- Gestionar estado con utilidades como useToggle, useCounter, useList, useMap o useQueue.
- Trabajar con tiempo y efectos con useTimeout, useInterval, useDebounce o useThrottle.
- Reaccionar al navegador con useWindowSize, useIntersectionObserver, useEventListener o useKeyPress.
Cuándo usarlo
Encaja cuando necesitas hooks bien probados y seguros para renderizado en servidor sin añadir una dependencia pesada ni implementarlos a mano. Es buena opción para proyectos React 18+ que quieren cubrir casos habituales rápidamente. Si buscas algo más amplio, existen alternativas como react-use o usehooks-ts; esta destaca por su enfoque cuidado y server-safe.
Ejemplo
Instalación con npm:
npm i @uidotdev/usehooks
Uso de useLocalStorage en un componente:
import { useLocalStorage } from "@uidotdev/usehooks";
function App() {
const [theme, setTheme] = useLocalStorage("theme", "light");
return (
<button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
Tema actual: {theme}
</button>
);
}
Puntos clave
- Más de 40 hooks cubriendo almacenamiento, DOM, eventos, estado, temporización y utilidades.
- Diseñados para ser seguros en renderizado en servidor (server-safe).
- Distribución como paquete npm, con tipos y categorías estándar y experimentales.
- Mantenido por ui.dev, con documentación y ejemplos en usehooks.com.
Ten en cuenta
Requiere React 18.0.0 o superior, por lo que no es apto para proyectos en versiones anteriores. La última versión publicada (v2.4.1) data de octubre de 2023, así que el ritmo de publicación de releases es bajo, aunque el repositorio sigue activo. Algunos hooks se marcan como experimentales: conviene revisar su estado antes de usarlos en producción.