React Hooks

repo: glauberfc/awesome-react-hooks
category: Front-End Development related: React

Awesome React Hooks

<img src="https://user-images.githubusercontent.com/15311858/47717137-ab421180-dc23-11e8-9ee8-a0de40260113.png">

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
• Tutorials/Articles/Workshops
• Discussions
• Examples
• Extensions/Libraries

Hooks

• Introducing Hooks
• Hooks at a Glance
• Using the State Hook
• Using the Effect Hook
• Rules of Hooks
• Building Your Own Hooks
• Hooks API Reference
• Hooks FAQ

Tutorials/Articles/Workshops

• React Today and Tomorrow and 90% Cleaner React - Dan Abramov and Sophie Alpert.
• [Making Sense of React Hooks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) - Dan Abramov.
• React Hooks and Suspense - Kent C. Dodds.
• [React Hooks & testing: Stepping through React code](https://youtu.be/JQeB9miT9Wc) - Kent C. Dodds.
• [My Thoughts on React Hooks](https://youtu.be/gmF4k6P2va8) - Ben Awad.
• [Fetching Data from an API with React Hooks useEffect](https://youtu.be/k0WnY0Hqe5c) - Ben Awad.
• [Are React Hooks Slower than Class Components?](https://youtu.be/tKRWuVOEB2w) - Ben Awad.
• [Building a Todo List with React Hooks useState](https://youtu.be/cAZ-fOd1RpA) - Ben Awad.
• [Using React Hooks vs. Class Components](https://youtu.be/vbaIZ3xMj9U) - Ben Awad.
• [Using Immer with Reducers and React Hooks](https://youtu.be/FmKjwh34Rn8) - Ben Awad.
• React Hooks useContext - Ben Awad.
• [Everything you need to know about React Hooks](https://medium.com/@vcarl/everything-you-need-to-know-about-react-hooks-8f680dfd4349) - Carl Vitullo.
• [Hooks in react-spring, a tutorial](https://medium.com/@drcmda/hooks-in-react-spring-a-tutorial-c6c436ad7ee4) - Paul Henschel.
• React Hooks: Notes Taken - Tomáš Konrády.
• [Getting Started with React Hooks](https://scotch.io/tutorials/getting-started-with-react-hooks) - Chris Sevilleja.
• React hooks: not magic, just arrays - Rudi Yardley.
• [Why 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 Hooks for GraphQL](https://medium.com/open-graphql/react-hooks-for-graphql-3fa8ebdd6c62) - Nader Dabit.
• [Manage global state with 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 - Ross Bulat.
• [Primer on React Hooks](https://testdriven.io/blog/react-hooks-primer/) - Austin Johnston.
• React Hooks - A deeper dive featuring useContext and useReducer - Austin Johnston.
• [Advanced React Hooks Workshop](https://github.com/kentcdodds/advanced-react-hooks) - Kent C. Dodds.

Discussions

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

Examples

• Color Match - Color Match Game.
• React Hooks counter - Counter using useState of React Hooks.
• Toggle component - Toggle component made with React Hooks.
• Hooks test - Somewhat complicated use case solved relatively nicely with React Hooks.
• React Hanger - React Hanger example.
• React Navigation Hooks - React hooks for convenient react-navigation use.
• Haunted - React's Hooks API implemented for web components.
• useHooks - Easy to understand React Hook recipes by Gabe Ragland.
• [Collection of React Hooks](https://nikgraf.github.io/react-hooks/) - Collection of React Hooks.
• React Spring demo - Demo of how react-spring could use React Hooks as a new API.
• React Hooks - React Hooks useState() and useEffect().
• Hooks Todo App - App made with React Hooks.
• react-thanos - React hooks implementation of Google's Thanos easter egg.

Extensions/Libraries

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

License

Awesome React hooks is CC0 licensed.