Awesome React Hooks Overview

A curated list about React Hooks

🏠 Home · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 glauberfc/awesome-react-hooks · ⭐ 1.1K · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

Awesome React Hooks

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 - Dan Abramov.
• React Hooks and Suspense - Kent C. Dodds.
• React Hooks & testing: Stepping through React code - Kent C. Dodds.
• My Thoughts on React Hooks - Ben Awad.
• Fetching Data from an API with React Hooks useEffect - Ben Awad.
• Are React Hooks Slower than Class Components? - Ben Awad.
• Building a Todo List with React Hooks useState - Ben Awad.
• Using React Hooks vs. Class Components - Ben Awad.
• Using Immer with Reducers and React Hooks - Ben Awad.
• React Hooks useContext - Ben Awad.
• Everything you need to know about React Hooks - Carl Vitullo.
• Hooks in react-spring, a tutorial - Paul Henschel.
• React Hooks: Notes Taken - Tomáš Konrády.
• 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 - Rudi Yardley.
• Writing Custom React Hooks for GraphQL - Nader Dabit.
• Manage global state with React Hooks - Charles Stover.
• React Hooks: Managing Web Sockets with useEffect and useState - Ross Bulat.
• Primer on React Hooks - Austin Johnston.
• React Hooks - A deeper dive featuring useContext and useReducer - Austin Johnston.
• Advanced React Hooks Workshop (⭐1.8k) - Kent C. Dodds.

Discussions

• v6 Candidate Preview: Use React Hooks for connect (⭐22k) - Mark Erikson.
• RFC: React Hooks (⭐4.5k) - Sebastian Markbåge.
• Using Hooks in React Native (⭐105k) - 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 (⭐199) - Somewhat complicated use case solved relatively nicely with React Hooks.
• React Hanger (⭐1.8k) - React Hanger example.
• React Navigation Hooks (⭐577) - React hooks for convenient react-navigation use.
• Haunted (⭐2.4k) - React's Hooks API implemented for web components.
• useHooks - Easy to understand React Hook recipes by Gabe Ragland.
• Collection of 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 (⭐35) - React hooks implementation of Google's Thanos easter egg.

Extensions/Libraries

• redux-react-hook (⭐2.2k) - React Hook for accessing state and dispatch from a Redux store.
• react-use (⭐34k) - Collection of essential React Hooks.
• The Platform (⭐4.4k) - Browser API's turned into React Hooks and Suspense-friendly React elements for common situations.
• eslint-plugin-react-hooks - This plugin enforce rule of hooks to avoid common mistakes.
• react-hooks-lib (⭐531) - A set of reusable React Hooks.
• use-immer (⭐2.4k) - A hook to use immer as a React hook to manipulate state.
• react-hanger (⭐1.8k) - A small collection of useful hooks for React 16.7.
• react-firebase-hooks (⭐2.9k) - A set of reusable React Hooks for Firebase.
• react-intersection-visible-hook (⭐50) - React hook to track the visibility of a functional component based on IntersectionVisible Observer.
• use-timer (⭐169) - Simple React hook to handle timer.
• react-native-hooks (⭐2.9k) - React Native APIs turned into React Hooks for use in stateless React components.
• react-with-hooks (⭐152) - Ponyfill for the proposed React Hooks API.
• react-hooks-screen-type (⭐15) - Determining screen size type for Bootstrap 4 grid.
• use-http (⭐2.2k) - React hooks for making isomorphic HTTP requests.
• react-fetch-hook (⭐348) - React hook for conveniently use Fetch API.
• storeon (⭐1.9k) - hook-based state manager in 173 bytes.
• react-hook-form (⭐31k) - Performance, flexible and extensible forms with easy to use for validation.

License

Awesome React hooks is CC0 licensed.