Skip to main content

React Hooks

Like Jotai/Valtio for more complex state handling. React Query is great for web requests & caching. ahooks has many useful hooks too. Tilg is nice for debugging components.

I now am using Solid for all my web apps and static sites, so trying to port many useful hooks from here for Solid.

State​

  • Jotai - Primitive, flexible state management for React. (How Jotai Specifies Package Entry Points) (Tweet)
  • Store - Beautifully-simple framework-agnostic modern state management library.
  • React Tracked - Simple and fast global state with React Context. Eliminate unnecessary re-renders without hassle.
  • idyl - Merge ideas from zustand + swr + valtio into a simple shared state.
  • Concave - Lens-like state management.
  • Stook - Minimalist design state management library for React.
  • Focal - Type safe, expressive and composable state management for React applications.
  • resso - Reactive shared store of React. No extra re-render.
  • statin - Simple and tiny reactive state library.
  • Synergies - Create a performant distributed context state by synergyzing atomar context pieces and composing reusable state logic.
  • Create React State - React state management you already know how to use.
  • Exome - State manager for deeply nested states.
  • Micro-observables - Simple Observable library that can be used for easy state management in React applications.
  • liquorstore - Reactive store that is fine, really. It works with React.
  • mage - Stateful + logical abstraction layer for react.

DB​

  • Use Supabase - Simple zero dependencies package that gives you access to your Supabase client.
  • react-supabase - React Hooks library for Supabase.

Other​

  • suspend-react - Integrate React Suspense into your apps.
  • Rooks - Collection of regularly used custom hooks as utils for React.
  • Constate - Scalable state manager using React Hooks & Context.
  • Collection of essential React Hooks
  • useHooks - Easy to understand React Hook recipes by Gabe Ragland. (Code)
  • Use Hotkeys - React wrapper around Hotkeys.js.
  • Use Events - Events turned into React Hooks.
  • useQueryParams - React Hook for managing state in URL query parameters with easy serialization.
  • react-apollo-hooks - Use Apollo Client as React hooks.
  • wouter - Minimalistic ~1KB routing for React. Nothing else but HOOKS.
  • useFetch - React hook for making isomorphic http requests.
  • Unform - ReactJS form library to create uncontrolled form structures with nested fields, validations and much more.
  • use-inline-memo - React hook for memoizing values inline anywhere in a component.
  • React Navigation Hooks - React hooks for convenient react-navigation use.
  • react-hotkeys-hook - React hook for using keyboard shortcuts in components.
  • Hooks.Guide - Collection of React hooks curated by the community.
  • SWR - React Hooks library for remote data fetching. (Docs) (Preview) (SWR Custom Cache)
  • react-zen - React utilities for working with APIs.
  • React Query - Hooks for fetching, caching and updating asynchronous data in React. (Essentials course) (Tweet) (Web) (When not to use it)
  • react-hooks-fetch - React custom hook for data fetching with Suspense. (Article)
  • react-suspense-fetch - React Suspense Render-as-You-Fetch pattern for REST APIs.
  • useDebounce - Debounce hook for react.
  • use-methods - Simpler way to useReducers.
  • @umijs/hooks - React Hooks Library.
  • Beautiful React Hooks - React hooks to speed-up your components and hooks development.
  • Collection of React Hooks (Code)
  • use-what-changed - Simple hook to debug major Reactjs hooks and custom hooks.
  • use-immer - Use immer to drive state with a React hooks.
  • usePlacesAutocomplete - React hook for Google Maps Places Autocomplete.
  • use-scroll-to-bottom - React Hook which tells you when you've scrolled to bottom.
  • react-use-mutable - Tiny hook that keeps your react state up-to-date in callbacks.
  • use-cannon - Physics based hooks for react-three-fiber.
  • react-hooks-global-state - Simple global state for React with Hooks API.
  • use-local-storage - Like useState() but for local storage.
  • useWorker - Running heavy task in background, without blocking the UI.
  • use-persisted-state - Custom React Hook that provides a multi-instance, multi-tab/browser shared and persistent state.
  • useSound - React Hook for Sound Effects. (Article)
  • react-head - Hooks to populate the html head.
  • @kripod/react-hooks - Essential set of React Hooks for convenient Web API consumption and state management.
  • use-deep-compare-effect - React's useEffect hook, except using deep comparison on the inputs, not reference equality.
  • react-storage-hooks - Custom React hooks for keeping application state in sync with localStorage or sessionStorage.
  • useEffectReducer - React hook for managing side-effects in your reducers.
  • use-shopping-cart - React Hook that handles shopping cart state and logic for Stripe.
  • React Cool Inview - React hook to monitor an element enters or leaves the viewport (or another element).
  • use-is-in-viewport - React hook to find out if an element is in a given viewport with a simple api.
  • Little State Machine - React custom hook for persist state management.
  • react-layout-effect - useLayoutEffect with SSR fallback and React Native support.
  • use-resize-observer - React hook that allows you to use a ResizeObserver to measure an element's size.
  • Focus Layers - Tiny React hooks for isolating focus within subsections of the DOM.
  • React-async-hook - React hook to handle any async operation in React components.
  • use-constant - React hook for creating a value exactly once. useMemo doesn't give this guarantee unfortunately.
  • use-asset - Data fetching strategy for React Suspense. (Tweet)
  • use-state-with-deps - React hook to use state and reset with dependencies.
  • react-time-sync - React library to synchronize timers across an application.
  • react-adaptive-hooks - Deliver experiences best suited to a user's device and network constraints.
  • React UseGesture - Hook that lets you bind richer mouse and touch events to any component or view.
  • react-hook - Strongly typed React hooks for function components.
  • Hoofd - Hooks to populate the HTML head.
  • useQueryString - React hook that serializes state into the URL query string.
  • history-reducer - Simple react hook to create state history based on react useReducer.
  • Object Hooks - React Hooks for Mutable State.
  • useDebouncy - Small (180 bytes) debounce effect hook for React with TypeScript support.
  • useComments - React hook to effortlessly add a comment section to your website, and start the discussion on your content.
  • react-delta - Experimental effects API for react.
  • Compose react refs - Small utility that composes two or more react refs into a ref callback.
  • react-laag - Hooks to build things like tooltips, dropdown menu's and popovers in React. (Web)
  • React Hot Toast - Lightweight, customizable and beautiful by default. (Web)
  • use-subsequent-effect - use(Layout)Effect variant hook that skips the initial render.
  • Focus Rings - Centralized system for displaying and stylizing focus indicators anywhere on a webpage.
  • react-collapsed (useCollapse) - React custom-hook for creating flexible and accessible expand/collapse components.
  • uhooks - Micro hooks: a minimalistic client/server hooks' implementation.
  • uhooks-nofx - Hooks without any side-effect, to provide the exact same uhooks API but doing pretty much nothing, except returning the right initial value for SSR components.
  • useFilePicker - Simple react hook to open browser file selector.
  • React Cool Form - React hooks for forms state and validation, less code more performant.
  • use-less - React hooks that help you do what you already did, with more indirection.
  • Hookstate - Simple but very powerful and incredibly fast state management for React that is based on hooks. (Web)
  • react-use-wizard - React wizard (stepper) builder without the hassle, powered by hooks.
  • pullstate - Simple state stores using immer and React hooks - re-use parts of your state by pulling it anywhere you like.
  • use-between - Sharing state between React components.
  • react-infinite-scroll-hook - Hook to create infinite scroll components.
  • Fun Hooks - Generalized and simple hooking API for adding extensibility to applications.
  • react-states - Make your reducers more explicit and constrained.
  • Faster Full Stack Framework - Isomorphic | Zero Api | Using "React Hooks" to develop the back-end.
  • react-popper-tooltip - React hook to effortlessly build smart tooltips.
  • use-clipboard-copy - Lightweight copy to clipboard hook for React.
  • useRealTime - React hook for dealing with real-time applications.
  • React Hooks by Baidu
  • use-editable - Small React hook to turn elements into fully renderable & editable content surfaces, like code editors, using contenteditable (and magic).
  • react-hanger - Collection of useful React hooks.
  • useUnmountSignal - React Hook to cancel promises when a component is unmounted.
  • useStateMachine - ½ kb state machine hook for React. (HN)
  • react-hookz/web - Library of general-purpose React hooks built with care and SSR compatibility in mind.
  • React Cool Virtual - Tiny React hook for rendering large datasets like a breeze.
  • React Solid State - Local state swap for React using SolidJS.
  • React Facade - Dependency injection for React hooks.
  • useCookieConsent - React hook for managing GDPR cookie consent state.
  • use-referee - Collection of ref-related hooks.
  • use-web-animation - Hooks to leverage the web-animations API in under a kb.
  • useNft - React hook to fetch metadata from any NFT. (Web)
  • flooks - State manager for React Hooks, with gorgeous auto optimized re-render.
  • react-tracking - Declarative tracking for React apps.
  • react-virtual - Hooks for virtualizing scrollable elements in React.
  • zustand-middleware-xstate - Allows you to easily put your xstate state machines into a global zustand store.
  • Rko - State management library for React with built-in undo, redo, and persistence. Built on Zustand.
  • react-drag-elements - Small & efficient React Hook that allows users to drag items around and update lists of elements.
  • Web Vitals - Bring web vitals quickly into your react project.
  • react-use-clipboard - React hook that provides copy to clipboard functionality.
  • AtomicState - Decentralized state management library for React.
  • observable-hooks - Concurrent mode safe React hooks for RxJS Observables. Simple, flexible, testable and performant.
  • react-generate-context - React Context with less boilerplate.
  • SomeHooks - Collection of framework agnostic hooks.
  • useItemList - Primitive React hook used to coordinate indexed collections effortlessly.
  • use-lax - React hook to use with lax.js.
  • fp-ts-react-stable-hooks - Reduce unnecessary rerenders when using fp-ts data types with React hooks.
  • use-callback-ref - Same useRef, but it will callback.
  • use-reducer-async - React useReducer with async actions.
  • axios-hooks - React hooks for axios, with built-in support for server side rendering.
  • React Cool Portal - React hook for Portals, which renders modals, dropdowns, tooltips etc. to <body> or else.
  • use-web-animations - React hook for highly-performant and manipulable animations using Web Animations API.
  • use-context-selector - React useContextSelector hook in userland.
  • OIDC React - React component/hooks to provide OpenID Connect and OAuth2 protocol support.
  • useDescendants - React hook for keeping track of descendant components and their relative indeces.
  • use-color - Powerful color hook that all designers deserve.
  • Zustood - Modular store factory using zustand.
  • use-double-click - Simple React hook for differentiating single and double clicks on the same component.
  • react-query-helper - Helper library to use react-query more efficient, consistency. (Reddit)
  • react-use-measure - Utility to measure view bounds.
  • usehooks-ts - React hook library, ready to use, written in Typescript. (Docs)
  • react-script-hook - React hook to dynamically load an external script and know when its loaded.
  • useFilter - React hook to filter large amount of data using Web Worker. (Article)
  • transition-hook - Extreme light-weight react transition animation hook which is simpler and easier to use than react-transition-group.
  • Retil - Superpowers for React Developers.
  • Byteclaw/hooks - Collection of useful React hooks.
  • usePromise - React hook for resolving promises with Suspense support.
  • web-platform - React SDK for building modern, accessible and cross-platforms interfaces.
  • repeaterjs/react-hooks - React hooks for working with async iterators/generators.
  • use-combined-pagination - React Hook for paginating data from multiple sources.
  • useReactQueryAutoSync - React hook which lets you automatically synchronize a value to a server with react-query. (Article)
  • React Loads - Backend agnostic library to help with external data fetching & caching in your UI components.
  • useAudioPlayer - Custom React hook & context for controlling browser audio.
  • useStickyScroll - React hook to help you set up 'sticky scroll' behavior.
  • usePureCallback - useCallback done right.
  • react-sweet-state - Shared state management solution for React.
  • use-stream - React Hook for working with streams inside function components.
  • use-clipboard-api - React Hook that consumes Web Clipboard API.
  • react-browser-navigator - React Hooks to access browser navigator properties.
  • use-gauge - Headless React hook for building beautiful gauge charts.
  • Watchable - Library to expose state into React.
  • Alibaba Hooks - High-quality & reliable React Hooks library. (Docs)
  • Recoil Persist - Tiny module for recoil to store and sync state to Storage.
  • React Click Away Listener - Tiny React Click Away Listener built with React Hooks.
  • react-event-hook - Library for emitting and listening to events in a React application.
  • React Tidy - Collection of atomic, independent, typed, tested and documented React custom hooks.
  • use-interactions - Reusable and common web interactions with WCAG accessibility criteria for React.
  • y-presence - Easy way to add presence (live cursors/avatars) to any react application using react hooks.
  • form-builder - Lightweight react hook library to simplify approach in building Formik form.
  • usePortal - React hook for Portals.
  • useDelayedRender - React hook for delaying the render and unmount of a component.
  • onClickOutside - React hook to listen for clicks outside of the component(s).
  • react-sage - Handy-dandy React hooks.
  • useSSE - Perform asynchronous effects both on client and serve side.
  • useTilg - Magical React Hook to help you debug your components. (Tweet)
  • event - Tiny and powerful hook-based event system for React.
  • useForm - Tiny hook that make react forms easy.
  • react-cancelable - Make cancelable requests with react-hooks.
  • useTimeline - Enchanced useState hook which keeps track of the states history, allowing you to undo and redo states.
  • useLocationState - Store and retrieve state from the browsers history using modern hooks.
  • jotai-form
  • useSvelteStore - Use svelte stores in react with hooks.
  • useUndoable - React hook for undo/redo functionality.
  • useCookie - React hook for managing cookies with no dependencies.
  • use-clamp-text - React hook to clamp multiline text to a given height in a responsive way and with extreme flexibility.
  • useAwait - React hook for handy async UI.
  • react-hooks-compose - Decouple Hooks from the presentational components that use them.
  • react-use-event-hook - Same as React's useCallback, but returns a stable reference.
  • useAsyncMemo - React hook for generating async memoized data.
  • use-transition-effect - Run long effects without blocking the main thread.
  • Charlie Tango Hooks
  • form-atoms - Atomic form primitives for Jotai.
  • useAsyncEffect - Asynchronous side effects, without the nonsense.
  • useAsyncEffect - React hook for async effects powered by generator functions.

Code​

<!-- Run `doFunc()` after 2 seconds of component loading -->
useEffect(() => {
  const timeout = window.setTimeout(() => doFunc(), 2000)
  return () => window.clearTimeout(timeout)
}, [])

Notes​