React Hooks Docs

React Hooks RFC

Change requests for React.

"Making Sense of React Hooks" by Dan Abramov

Dan Abramov.

"From React.Component to hooks" by Octave Raimbault

"React Hooks: What’s going to happen to my tests?" by Kent C. Dodds

"State Management with React Hooks - No Redux or Context API" by André Gardi

"How to Fetch Data with React Hooks?" by Robin Wieruch

Primer on React Hooks

Austin Johnston.

React Hooks - A deeper dive featuring useContext and useReducer

Austin Johnston.

"Using Custom React Hooks to Simplify Forms" by James King

Testing of a Custom React Hook for Fetching Data with Axios

The Guide to Learning React Hooks (Examples & Tutorials) by Eric Bishard

"Sanely Testing React Hooks" by Dave Cooper

React by Example: Hooks

🎬 ReactConf 2018: React Today and Tomorrow by Sophie Alpert and Dan Abramov

Official announcement and first demo.

🎬 ReactConf 2018: 90% Cleaner React by Ryan Florence

🎬 React Hooks: A Complete Introduction by Harry Wolff

🎬 React Hooks playlist by Ben Awad

🎬 React Hooks playlist by Josh Ribakoff

🎬 React Hooks playlist by Michael Chan

🎬 Custom Hooks in React by Tanner Linsley

React Hooks - Syntax (Nov 14th, 2018)

React Hooks 1 Year Later - Syntax (Mar 18, 2020)

Why should I use React Hooks? - Syntax (Dec 7th, 2020)

eslint-plugin-react-hooks

This plugin enforce rule of hooks to avoid common mistakes.

hooks.macro

Babel Macros for automatic memoization invalidation

CodeSandbox Starter Kit

React Hooks Snippets for VS Code

hook-into-props

Helper to build HOCs using hooks. Useful for using hooks with class components.

react-universal-hooks

React Universal Hooks: just use****** everywhere, Functional or Class Components

Jooks

Unit-test your custom hooks by mocking React's Hooks API (useState, etc.)

react-hooks-testing-library

Library to create unit tests for custom React hooks.

@react-hookz/web

A library of general-purpose React hooks built with care and SSR compatibility in mind.

ahooks

A collection of React Hooks specifically aiming at enterprise applications.

beautiful-react-hooks(🔥)

A collection of hooks to speed-up your components and custom hooks development.

Captain hook

Modest list of hooks.

crooks

A collection of unique React Hooks.

hooks-by-example

Collection of beginner-friendly real world examples of hook usage.

Hooks.guide

Collection of React hooks curated by the community.

react-recipes

👩‍🍳 Collection of essential hook recipes 🥘

Searchable Collection of React Hooks

Collection of React Hooks.

Sunflower(🌻)

Collection of React Hooks returning components of antd.

useHooks(🐠)

One new React Hook recipe every day.

Use Hooks

A collection of reusable React Hooks.

@21kb/react-hooks

A set of React Hooks to get hooked on.

@d2k/react-devto

React hook for Dev.to API requests

@d2k/react-github

React hook for Github API requests

@d2k/react-localstorage

React hook that handles updating and clearing localstorage values while keeping them in sync with your components.

@elgorditosalsero/react-gtm-hook

React hook for handle easily the Google Tag Manager.

@hookstate/core

Modern, very fast and extendable state management for React.

@jzone/react-request-hook

🐶React hook for custom request，compatible with various lib, support redux

@kevinwolf/formal

Elegant form management primitives for the react hooks era.

@koale/useworker

⚙️ Running heavy task in background using web workers, without blocking the UI

@marvelsq/use-properties-hook

Instance functions inside FunctionComponent like class-properties and equal in ShallowCompare

@rehooks/component-size

React hook for determining the size of a component.

@rehooks/document-title

React hook for updating the document-title.

@rehooks/document-visibility

React hook for subscribing to document visibility.

@rehooks/input-value

React hook for creating input values.

@rehooks/local-storage

React hook which syncs localStorage[key] with the comp.

@rehooks/network-status

React hook for getting network-status.

@rehooks/online-status

React Hook for Online status.

@rehooks/window-scroll-position

React hook for getting window x and y position.

@rehooks/window-size

React hook for subscribing to window size.

@rekindle/use-request

🤖 React hook for making request.

@rkrupinski/use-state-machine

A finite state machine hook.

@staltz/use-profunctor-state

React Hook for state management with Profunctor Optics

@webscopeio/react-health-check

🏥 Lightweight React hook for checking health of API services.

@wellyshen/use-web-animations

🍿 React hook for highly-performant and manipulable animations using Web Animations API.

@withvoid/melting-pot

React hook utility library.

ahooks/usetable

A Progressive Solution for Query Table Scene.

concent

State management that tailored for react, it is simple, predictable, progressive and efficient.

constate

Transform your local state into global state using useContextState and useContextReducer.

conuse

Share Hook with Context

easy-peasy

Easy peasy global state for React.

fetch-suspense

React hook for the Fetch API with support for Suspense.

graphql-hooks

Minimal hooks-first GraphQL client.

mobx-react-lite

Lightweight React bindings for MobX based on experimental React hooks.

modali

A delightful modal dialog component for React, built from the ground up to support React Hooks.

moment-hooks

A library containing generic react hooks

nice-hooks

🍹 A lot of nice hooks to make react hooks easier to use ( useState callback / life cycle / instance variable)

promise-hook

React hook for simplifying Promise based data fetching.

reactive-react-redux

React Redux binding with React Hooks and Proxy

react-async-hook

React hook to fetch ad-hoc data into your React components.

react-cached-callback

React hooks for caching many callbacks by key, for example, in loops.

react-context-refs

React hooks for getting refs of elements via context.

react-cookie

React hooks for universal cookies.

react-cool-dimensions

📏 React hook to measure an element's size and handle responsive components.

react-cool-form

📋 React hooks for forms state and validation, less code more performant.

react-cool-inview

🖥️ React hook to monitor an element enters or leaves the viewport (or another element).

react-cool-portal

🍒 React hook for Portals, which renders modals, dropdowns, tooltips etc. to or else.

react-cool-virtual

♻️ A tiny React hook for rendering large datasets like a breeze.

react-countdown-hook

Dead simple yet powerful countdown hook for React. Powered by requestAnimationFrame.

react-darkreader

🌓 A React Hook for adding a dark / night mode to your site inspired by darkreader.

react-declare-form

React hook based declarative form library.

react-deep-hooks

React hooks for non-primitive dependencies.

react-dom-status-hook

React hook for subscribing to the DOMContentLoaded event.

react-enhanced-reducer-hook

An alternative to useReducer that accepts middlewares.

react-fetch-hook

React hook for conveniently use Fetch API.

react-firebase-hooks

A collection of hooks for use with Firebase.

react-form-stateful

Form library. Exposes dispatch to allow for the library to be extended through side effects.

react-hanger

A small collection of utility hooks.

react-hook-mighty-mouse

React hook that tracks mouse events on selected element 🐭

react-hook-mousetrap

A hook to trigger callbacks on keys or keys combos, powered by mousetrap.

react-hookedup

A collection of useful React hooks.

react-hook-form

Form validation without the hassle.

react-hook-layout

Layout management in React.

react-hooks-async

React custom hooks for async functions with abortability and composability

react-hooks-global-state

A simple global state management.

react-hooks-image-size

Hook to get natural image size from url.

react-hooks-lib

A set of reusable react hooks.

react-hooks-svgdrawing

A hooks to svg drawing.

react-hooks-use-modal

A hook to open the modal easily.

react-hooks-visible

A hook to element visibility. Uses the intersection observer API.

react-hooks-worker

React custom hooks for web workers

react-hotkey-hook

React hook for hotkeys.

react-i18next

Internationalization for react done right.

react-immer-hooks

useState and useReducer using Immer to update state.

react-indicative-hooks

Hooks wrapping a data validation library called Indicative

react-intersection-visible-hook

React hook to track the visibility of a functional component.

react-media-hook

React hook for Media Queries.

react-metatags-hook

React Hook to manage html meta tags.

react-native-react-bridge

A React Native plugin to run React and handle communication between them.

react-optimistic-ui-hook

⚛️ Minimal "optimistic UI" pattern implementation with a React hook

react-page-name

React Hook for managing the page title.

react-peer-data

React wrapper for PeerData library for files, media streaming/sharing using WebRTC.

react-pirate

React lifecycle and utilities hooks.

react-powerhooks

Hooks api for react-powerplug components.

react-promiseful

A React component and hook to render children conditionally based on a promise status.

react-query

Hooks for fetching, caching and updating asynchronous data in React.

react-recaptcha-hook

React hook for google-recaptcha v3

react-recipes

👩‍🍳 Collection of essential hook recipes 🥘

react-request-hook

Managed, cancelable and safe-oriented api requests.

react-responsive

React media query module.

react-rocketjump

Manage state and side effects like a breeze.

react-screen-wake-lock

React implementation of the Screen Wake Lock API. It provides a way to prevent devices from dimming or locking the screen when an application needs to keep running

react-script-hook

React hook to dynamically load an external script and know when its loaded

react-selector-hooks

Collection of hook-based memoized selector factories for declarations outside of render.

react-speech-kit

Hooks for browser Speech Recognition and Speech Synthesis.

react-state-patterns

Utility package for creating reusable implementations of React state provider patterns from hooks.

react-swipeable

React swipe event handler hook.

react-tracked

Simple and fast global state with React Context. Eliminate unnecessary re-renders without hassle.

react-uniformed

🚀 Declarative React forms using hooks.

react-use-api

Async HTTP request data for axios. Designed for diverse UI states, SSR and data pre-caching.

react-use-browser

A hook enabling client side hydration of Server-Side-Rendered components when server-produced markup needs to differ from the final client application markup.

react-use-calendar

A hook for implementing a calendar with events.

react-use-clipboard

A hook that copies text to a user's clipboard.

react-use-d3

A React hook to use D3.

react-use-data-loader

React hook for loading data

react-use-fetch-factory

React hook that takes care of fetching and selecting data with redux.

react-use-fetch-with-redux

React hook that caches API requests that works with redux.

react-use-form-state

React hook for managing form and inputs state.

react-use-id-hook

React hook for generating SSR-safe unique id strings.

react-use-idb

React hook for storing value in the browser using indexDB.

react-use-infinite-loader

infinity: :page_with_curl: :hourglass_flowing_sand: Super lightweight infinite loading (scroll) hook for React apps

react-use-input

🎣 A hook whose setter can be directly given to HTML inputs

react-use-lazy-load-image

sunrise: :zap: Add image lazy loading to your React app with ease

react-use-message-bar

A simple React hook for message bars.

react-use-modal

React hook for manage modal.

react-use-path

The tiniest hook style react router.

react-use-scroll-position

React hook for using the scroll position.

react-use-trigger

React hook for trigger effect from any place of code

react-use-watch

A React hook about triggers once only when dependencies have changed.

react-use-wavelet

React hooks for connecting to the Wavelet smart-contract platform

react-use

Collection of essential hooks.

react-useFormless

React hook to handle forms state.

react-usemiddleware

React hook for using existing Redux middlewares (like thunk or saga) with useReducer.

react-useportal

🌀 usePortal, React hook for Portals

react-user-media

React wrapper for navigator.getUserMedia.

react-wait

Complex Loader Management Hook for React Applications.

react-window-communication-hook

React hook to communicate among browser contexts (tabs, windows, iframes).

react-with-hooks

Ponyfill for the proposed React Hooks API.

reaktion

useState like hook for global state management.

redhooks

Global state management with React Hooks. It also supports the use of middleware like redux-thunk or redux-saga or your own custom middleware.

redux-react-hook

React hook for accessing mapped state from a Redux store.

region-core

A global state management framework with a hook useProps.

rehooks-visibility-sensor

It checks whether an element has scrolled into view or not.

resynced

Multiple state management using React Hooks API.

reto

Flexible and efficient React store with hooks.

rrh

Super Simple React Hooks for react-redux.

rxjs-hooks

An easy way to use RxJS v6+ with react hooks.

scroll-data-hook

Returns information about scroll speed, distance, direction and more.

style-hook

🎨 wirte css in js with react hooks.

swr

React Hooks library for remote data fetching.

the-platform

Browser API's turned into React Hooks and Suspense-friendly React elements for common situations.

trousers

👖 A hooks-first CSS-in-JS library, focused on semantics and runtime performance

use-abortable-fetch

React hook that does a fetch and aborts when the components is unloaded or a different request is made.

use-action

Almost same to useEffect, but not deferred.

use-as-bind

React hook for using as-bind with a WASM source.

use-async-memo

React hook for generating async memoized data.

use-autocomplete

A React hook for returning autocomplete values for a search string within an array.

use-axios-react

React CRUD hooks for axios, comprehensive list of examples

use-boolean

Convenient helpers for handling boolean state.

use-browser-history

A React hook to handle browser history events.

use-cart

A React hook that gives you shopping cart functionality.

use-click-away

React hook when you want a callback invoked when a DOM element was not clicked.

use-clippy

A React hook to reading from and writing to the user's clipboard.

use-context-selector

React useContextSelector hook in userland.

use-controlled-input-number

React hook to turn numeric input behavior into pretty much what you expect.

use-countries

Custom react hook to list countries and languages.

use-debounce

A debounce (and throttle) hook for React.

use-deep-compare

It's react's useEffect/useMemo/useCallback hooks, except using deep comparison on the inputs.

use-deep-compare-effect

🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality.

use-detect-print

React hook to detect when a page is being printed.

use-dimensions

React Native hook for getting screen and window dimensions.

use-double-click

React hook for continuous double-clicks and combining click and double-click events

use-eazy-auth

React hooks for handle auth stuff.

use-events

A set of React Hooks to handle mouse events.

use-force-update

React hook for forcing re-render of a functional Component.

use-hotkeys

HotKeys.js React Hook that listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts.

use-hovering

Simple, accessible React hook for tracking hover state.

use-http

🐶 useFetch, React hook for making isomorphic http requests.

use-immer

A hook to use immer to manipulate state.

use-input-file

React hook for creating input file.

use-is-mounted-ref

useIsMountedRef is a React Hook to check when the component is mounted.

use-lang-direction

A hook that reads the HTML element's dir attribute value and any updates to that value allowing you to update your UI accordingly.

use-last-fm

A hook to show your current playing song from Spotify or any other site last.fm supports in realtime. ♪

use-lilius

A headless calendar hook for React.

use-media

CSS media queries with React hook.

use-mouse-action

React Hooks to listen to both mouse down or up and click events with a once called function.

use-multiselect

Manage multiselect state.

use-overflow

A React Hook that allows you to detect X and Y overflow

use-places-autocomplete

📍 React hook for Google Maps Places Autocomplete.

use-popper

React hook wrapper around Popper.js.

use-query-params

A React Hook for managing state in URL query parameters with easy serialization.

use-react-modal

🖼 useModal, React hook for Modals/Dialogs/Lightboxes

use-react-router

React Hook for pub-sub behavior using React Router.

use-reactive-state

useReactiveState() - a reactive alternative to React's useState().

use-reducer-async

React useReducer with async actions

use-redux

A hook to bind redux.

use-scroller

React hook that automatically adds the next page, saving users from a full page load.

use-scroll-to-bottom

React hook for detecting when an element was scrolled to bottom.

use-simple-undo

Simple implementation of undo/redo functionality.

server-push-hooks

🔥 React hooks for socket.io, SEE and more to come

use-socket.io-client

React hook for socket.io-client, manipulate socket.io client without any side effect.

use-sse

✨useSSE - use Server-Side Effect. useEffect both on client and server side.

use-ssr

☯️ React hook to determine if you are on the server, browser, or react native.

use-state-snapshots

A React hook to keep track of state changes for undo/redo functionality.

use-substate

React hook for subscribing to your single app state (works with your current Redux app).

use-suspender

Execute asynchronous actions with React.Suspense

use-t

Multi-language using hooks.

use-undo

React hook to implement Undo and Redo functionality.

use-videocard

React hook to fetch the graphics card information of the client using canvas

use-window-blur-change-title

React Hook for set the page title when the user is shifting focus away from the current window.

useDarkMode

A custom React Hook to help you implement a "dark mode" component.

useDeferredState

A React hook for deferring state change. That's essential when your UI needs to wait for disappearing animation is complete to unmount component.

useDropZone

React hook that allows you to set simple drag and drop functionality.

useEmailAutocomplete

📬 React hook for email autocomplete inputs.

useFileDialog

Open file dialog without struggling with file input using useFileDialog react hook

useInView

React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.

useIsTyping

Hook to see if the user is typing within a textarea or input

useKeyCapture

⌨️ A simple hook to make keyDown listening event easier.

usePosition

React hook to get position top left of an element.

useReducerWithEffects

React Hook that colocates reducer and side effects

useReducerWithLocalStorage

React hook that adds local storage support to the useReducer hook

useScreenType

Determining screen size type for Bootstrap 4 grid.

useScreenType

React hook to dynamically get current screen type (mobile, tablet, desktop) with configurable breakpoint support.

useScrollSpy

React hook to automatically update navigation based on scroll position.

useServiceWorker

A React hook which can register a service worker

useValueAfter

Very simple React hook to easily provide different props to a component (comes in handy for testing edge cases)

useWaitForElements

A simple hook to wait for elements to be rendered with MutationObserver.

useWindowOrientation

A hook returning the window's orientation (portrait vs. landscape) based off of current window dimensions

useWindowWidthBreakpoints

A hook for using (Bootstrap-inspired) window width breakpoints