react-use
Reutilizar lógica común en React sin escribirla desde cero: media queries, clipboard, scroll, localStorage, fetch, etc.
Colección de más de 100 hooks de React esenciales para sensores, UI, estado, side-effects y utilidades del navegador.
Notas y contexto
Qué es
react-use es la colección de hooks de React más completa que existe. Cubre prácticamente cualquier caso de uso habitual en una aplicación web: interacción con el DOM, estado del navegador, ciclo de vida, animaciones y mucho más.
Para qué sirve
useLocalStorage/useSessionStorage— sincronizar estado con el almacenamiento del navegador.useDebounce/useThrottle— controlar la frecuencia de ejecución de efectos.useMedia— reaccionar a media queries desde JavaScript.useIntersection— detectar cuando un elemento entra en el viewport.usePrevious— acceder al valor anterior de una variable.useAsync/useFetch— gestionar el ciclo de vida de peticiones asíncronas.
Cuándo usarlo
Antes de escribir un hook personalizado, vale la pena comprobar si ya existe en react-use. Cubre los casos más comunes con una implementación testeada y tipada. Especialmente útil en proyectos donde no quieres instalar librerías específicas para cada necesidad.
Puntos clave
- Más de 100 hooks organizados en categorías: Sensors, UI, Side-effects, State, Lifecycle, Misc.
- Tipado completo en TypeScript.
- Cada hook tiene su propia demo interactiva en la documentación.
- Sin dependencias externas más allá de React.
Ten en cuenta
La librería es amplia pero no todos los hooks se mantienen con el mismo nivel de atención. Para hooks críticos en producción conviene revisar el código fuente antes de usarlos.