---
visibility: public
---

# React Hooks

**repo:** [glauberfc/awesome-react-hooks](https://github.com/glauberfc/awesome-react-hooks)  
**category:** [[front-end-development|Front-End Development]]
**related:** [[react|React]]

---

# Awesome React Hooks [![Awesome](https://awesome.re/badge-flat.svg)](https://awesome.re)

[<img src="https://user-images.githubusercontent.com/15311858/47717137-ab421180-dc23-11e8-9ee8-a0de40260113.png">](https://reactjs.org/docs/hooks-intro.html)

A curated list about React Hooks.

> _Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class._

## Contents

- [Hooks](#hooks)
- [Tutorials/Articles/Workshops](#tutorialsarticlesworkshops)
- [Discussions](#discussions)
- [Examples](#examples)
- [Extensions/Libraries](#extensionslibraries)

## Hooks

- [Introducing Hooks](https://reactjs.org/docs/hooks-intro.html)
- [Hooks at a Glance](https://reactjs.org/docs/hooks-overview.html)
- [Using the State Hook](https://reactjs.org/docs/hooks-state.html)
- [Using the Effect Hook](https://reactjs.org/docs/hooks-effect.html)
- [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html)
- [Building Your Own Hooks](https://reactjs.org/docs/hooks-custom.html)
- [Hooks API Reference](https://reactjs.org/docs/hooks-reference.html)
- [Hooks FAQ](https://reactjs.org/docs/hooks-faq.html)

## Tutorials/Articles/Workshops

- [React Today and Tomorrow and 90% Cleaner React](https://www.youtube.com/watch?v=dpw9EHDh2bM) - Dan Abramov and Sophie Alpert.
- [Making Sense of [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) - Dan Abramov.
- [React Hooks and Suspense](https://egghead.io/playlists/react-hooks-and-suspense-650307f2) - Kent C. Dodds.
- [React Hooks & [testing](/@harrisonqian/awesome/wiki/testing/testing): Stepping through [React](/@harrisonqian/awesome/wiki/front-end-development/react) code](https://youtu.be/JQeB9miT9Wc) - Kent C. Dodds.
- [My Thoughts on [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks](https://youtu.be/gmF4k6P2va8) - Ben Awad.
- [Fetching Data from an API with [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks useEffect](https://youtu.be/k0WnY0Hqe5c) - Ben Awad.
- [Are [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks Slower than Class Components?](https://youtu.be/tKRWuVOEB2w) - Ben Awad.
- [Building a Todo List with [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks useState](https://youtu.be/cAZ-fOd1RpA) - Ben Awad.
- [Using [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks vs. Class Components](https://youtu.be/vbaIZ3xMj9U) - Ben Awad.
- [Using Immer with Reducers and [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks](https://youtu.be/FmKjwh34Rn8) - Ben Awad.
- [React Hooks useContext](https://youtu.be/xWXxkFzgnFM) - Ben Awad.
- [Everything you need to know about [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks](https://medium.com/@vcarl/everything-you-need-to-know-about-react-hooks-8f680dfd4349) - Carl Vitullo.
- [Hooks in [react](/@harrisonqian/awesome/wiki/front-end-development/react)-spring, a tutorial](https://medium.com/@drcmda/hooks-in-react-spring-a-tutorial-c6c436ad7ee4) - Paul Henschel.
- [React Hooks: Notes Taken](https://medium.com/@tomaskonrady/react-hooks-notes-taken-c42376af3ab0) - Tomáš Konrády.
- [Getting Started with [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks](https://scotch.io/tutorials/getting-started-with-react-hooks) - Chris Sevilleja.
- [React hooks: not magic, just arrays](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e) - Rudi Yardley.
- [Why [React](/@harrisonqian/awesome/wiki/front-end-development/react)’s new Hooks API is a game changer](https://itnext.io/why-reacts-hooks-api-is-a-game-changer-8731c2b0a8c) - Rudi Yardley.
- [Writing Custom [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks for GraphQL](https://medium.com/open-graphql/react-hooks-for-[graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql)-3fa8ebdd6c62) - Nader Dabit.
- [Manage global state with [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks](https://medium.com/@Charles_Stover/manage-global-state-with-react-hooks-6065041b55b4) - Charles Stover.
- [React Hooks: Managing Web Sockets with useEffect and useState](https://medium.com/@rossbulat/react-hooks-managing-web-sockets-with-useeffect-and-usestate-2dfc30eeceec) - Ross Bulat.
- [Primer on [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks](https://testdriven.io/blog/react-hooks-primer/) - Austin Johnston.
- [React Hooks - A deeper dive featuring useContext and useReducer](https://testdriven.io/blog/react-hooks-advanced/) - Austin Johnston.
- [Advanced [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks Workshop](https://github.com/kentcdodds/advanced-react-hooks) - Kent C. Dodds.

## Discussions

- [v6 Candidate Preview: Use [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks for connect](https://github.com/reduxjs/react-redux/pull/1065) - Mark Erikson.
- [RFC: [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks](https://github.com/reactjs/rfcs/pull/68) - Sebastian Markbåge.
- [Using Hooks in [React](/@harrisonqian/awesome/wiki/front-end-development/react) Native](https://github.com/facebook/react-native/issues/21967#issuecomment-434113687) - Héctor Ramos.

## Examples

- [Color Match](https://codesandbox.io/s/jjy215l7w3) - Color Match Game.
- [React Hooks counter](https://codesandbox.io/s/yjn90lzwrx?module=%2Fsrc%2FApp.js) - Counter using useState of [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks.
- [Toggle component](https://codesandbox.io/s/m449vyk65x) - Toggle component made with [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks.
- [Hooks test](https://github.com/jacobp100/hooks-test) - Somewhat complicated use case solved relatively nicely with [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks.
- [React Hanger](https://github.com/kitze/react-hanger) - [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hanger example.
- [React Navigation Hooks](https://github.com/react-navigation/react-navigation-hooks) - [React](/@harrisonqian/awesome/wiki/front-end-development/react) hooks for convenient [react](/@harrisonqian/awesome/wiki/front-end-development/react)-navigation use.
- [Haunted](https://github.com/matthewp/haunted) - [React](/@harrisonqian/awesome/wiki/front-end-development/react)'s Hooks API implemented for [web components](/@harrisonqian/awesome/wiki/front-end-development/web-components).
- [useHooks](https://usehooks.com/) - Easy to understand [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hook recipes by [Gabe Ragland](https://twitter.com/gabe_ragland).
- [Collection of [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks](https://nikgraf.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/react-hooks/) - Collection of React Hooks.
- [React Spring demo](https://codesandbox.io/s/ppxnl191zx) - Demo of how [react](/@harrisonqian/awesome/wiki/front-end-development/react)-spring could use React Hooks as a new API.
- [React Hooks](https://codesandbox.io/s/yq5qowzrvz) - [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks useState() and useEffect().
- [Hooks Todo App](https://codesandbox.io/s/9kwyzy0y4) - App made with [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks.
- [react-thanos](https://github.com/codeshifu/react-thanos) - [React](/@harrisonqian/awesome/wiki/front-end-development/react) hooks implementation of Google's Thanos easter egg.

## Extensions/Libraries

- [redux-[react](/@harrisonqian/awesome/wiki/front-end-development/react)-hook](https://github.com/facebookincubator/redux-react-hook) - React Hook for accessing state and dispatch from a [Redux](/@harrisonqian/awesome/wiki/front-end-development/redux) store.
- [react-use](https://github.com/streamich/react-use) - Collection of essential [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks.
- [The Platform](https://github.com/palmerhq/the-platform) - Browser API's turned into [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks and Suspense-friendly React elements for common situations.
- [eslint-plugin-[react](/@harrisonqian/awesome/wiki/front-end-development/react)-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) - This plugin enforce rule of hooks to avoid common mistakes.
- [react-hooks-lib](https://github.com/beizhedenglong/react-hooks-lib) - A set of reusable [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks.
- [use-immer](https://github.com/mweststrate/use-immer) - A hook to use immer as a [React](/@harrisonqian/awesome/wiki/front-end-development/react) hook to manipulate state.
- [react-hanger](https://github.com/kitze/react-hanger) - A small collection of useful hooks for [React](/@harrisonqian/awesome/wiki/front-end-development/react) 16.7.
- [react-[firebase](/@harrisonqian/awesome/wiki/platforms/firebase)-hooks](https://github.com/csfrequency/react-firebase-hooks) - A set of reusable [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks for [Firebase](/@harrisonqian/awesome/wiki/platforms/firebase).
- [react-intersection-visible-hook](https://github.com/AvraamMavridis/react-intersection-visible-hook) - [React](/@harrisonqian/awesome/wiki/front-end-development/react) hook to track the visibility of a functional component based on IntersectionVisible Observer.
- [use-timer](https://github.com/thibaultboursier/use-timer) - Simple [React](/@harrisonqian/awesome/wiki/front-end-development/react) hook to handle timer.
- [react-native-hooks](https://github.com/react-native-community/react-native-hooks) - [React](/@harrisonqian/awesome/wiki/front-end-development/react) Native APIs turned into React Hooks for use in stateless React components.
- [react-with-hooks](https://github.com/yesmeck/react-with-hooks) - Ponyfill for the proposed [React](/@harrisonqian/awesome/wiki/front-end-development/react) Hooks API.
- [react-hooks-screen-type](https://github.com/pankod/react-hooks-screen-type) - Determining screen size type for Bootstrap 4 grid.
- [use-http](https://github.com/alex-cory/react-usefetch) - [React](/@harrisonqian/awesome/wiki/front-end-development/react) hooks for making isomorphic HTTP requests.
- [react-fetch-hook](https://github.com/ilyalesik/react-fetch-hook) - [React](/@harrisonqian/awesome/wiki/front-end-development/react) hook for conveniently use Fetch API.
- [storeon](https://github.com/storeon/storeon) - hook-based state manager in 173 bytes.
- [react-hook-form](https://github.com/bluebill1049/react-hook-form) - Performance, flexible and extensible forms with easy to use for validation.

## License

Awesome React hooks is [CC0 licensed](/LICENSE.md).
