Using React Hooks

Hooks are a feature that lets you use state and other React features without writing a class. More info

Articles & Tutorials

Why you should choose useState instead of useReducer (medium.com)
May 15, 2019
A guide to local and global state management via useState.
  • Austin Malerba
How to convert from React-Redux classes to React Hooks, the easy way (medium.freecodecamp.org)
May 15, 2019
With the recent release of create-react-app v3 and React hooks, I decided to write a tutorial on how to refactor a class component to a functional hooks component.
  • Mohammad Iqbal
React's useReducer vs Redux (robinwieruch.de)
May 13, 2019
Now, many people keep wondering: Does useContext and useReducer replace Redux? As of the time of writing this article, React Hooks don’t replace Redux.
Build a React Timer Component Using Hooks (upmostly.com)
May 12, 2019
Build a React timer component using the useState and useEffect Hooks in minutes. A React timer component is a great way to learn React, so let’s begin!
  • James King
Level Up useReducer with Immer (hswolff.com)
May 10, 2019
So, now that we all agree that useReducer is the best thing since the wheel, let's talk about how we can make it even better. I'm talking better than a wheel.
  • Harry Wolff
Persisting your React state in 9 lines (dev.to)
May 07, 2019
This article will take you through the process of creating a reusable custom hook that persists our state to local storage.
  • Kristofer Selbekk
setInterval in React Components Using Hooks (upmostly.com)
May 05, 2019
Using setInterval inside React components allows us to execute a function or some code at specific intervals. Let’s explore how to use setInterval in React.
  • James King
setTimeout in React Components Using Hooks (upmostly.com)
May 04, 2019
Use setTimeout in your React components to execute a function or block of code after a period of time. Let’s explore how to use setTimeout in React.
  • James King
Why I Love useReducer (hswolff.com)
May 03, 2019
I didn't realize until recently how much I loved the React Hook useReducer. It's one of those advanced hooks, and while I read the documentation about it and already have a good amount of experience with Redux, it took a little while for me to fully understand just how powerful useReducer can make your components.
  • Harry Wolff
Discovering React Hooks with KendoReact (telerik.com)
May 01, 2019
React Hooks have been available for use since the React 16.8 release. We'll learn how we can start applying these Hooks by using our KendoReact components.
  • Eric Bishard
Using React Hooks in Ionic React (blog.ionicframework.com)
Apr 30, 2019
We were excited to see how hooks can make common app building tasks and accessing native APIs really easy and clean, and wanted to walk through the new Hooks APIs in the context of an Ionic React app.
  • Max Lynch
How to useReducer in React? (robinwieruch.de)
Apr 28, 2019
This tutorial goes step by step through a useReducer example in React for getting you started with this React Hook for state management.
Refactoring the StarRating Component with React Hooks (dev.to)
Apr 25, 2019
In the first edition of the book, we built an app called the Color Organizer. It's an app that allows people to add, edit, and delete from their list of favorite colors.
useReducer vs useState in React (robinwieruch.de)
Apr 17, 2019
There are two main hooks that are used for modern state management in React: useState and useReducer. This tutorial doesn’t explain both React hooks in detail, but explains their different use case scenarios.
A Closer Look at React Memoize Hooks: useRef, useCallback, and useMemo (codebeast.dev)
Apr 15, 2019
The best way to understand what memoize hooks are is to expose ourselves to the problem space which these hooks solve. Starter hooks examples don’t expose these problems. They make hooks look approachable and straightforward— which makes complete sense.
When to use React Suspense vs React Hooks (medium.freecodecamp.org)
Apr 15, 2019
React Suspense is to a Monad as Hooks are to Applicative Notation
  • Vitaliy Akimov
How to manage viewport intersection and input focus with custom React Hooks (medium.freecodecamp.org)
Apr 15, 2019
React Hooks have been here for a while, and there are many packages, recipes and discussions going on about the same. This article goes through a similar path.
  • Dane David
Replacing Component Lifecycles with the useEffect Hook, in React (alligator.io)
Apr 14, 2019
React Hooks are revolutionizing the way we develop in React and solving some of our biggest concerns. The useEffect Hook allows us to replace repetitive component lifecycle code.
  • Holly Girouard
useRef vs useState: Should we re-render or not? (codebeast.dev)
Apr 11, 2019
Getting started with React is not the hard part, it’s understanding React’s lifecycle and how re-rendering works. With these new Hooks API’s, we have an extra layer of question marks regarding when and how reconciliation in the virtual DOM tree happens (aka re-rendering).
Learn the basics of React Hooks in <10 minutes (medium.freecodecamp.org)
Apr 08, 2019
An Illustrated Guide on React Hooks.
  • Ohans Emmanuel
React State with Hooks: useReducer, useState, useContext (remysharp.com)
Apr 06, 2019
In this tutorial, we will almost reach the point where these hooks mimic sophisticated state management libraries like Redux for globally managed state. Let’s dive into the application which we will implement together step by step.
How to Use the useContext Hook in React (upmostly.com)
Mar 30, 2019
Let’s explore the React useContext Hook by building a music player! I’ll also show you how a custom React Hook can make the useContext Hook easier to use.
  • James King
Using the useEffect hook (leighhalliday.com)
Mar 28, 2019
In this article we'll look at how to get an effect to run after every render, just once, or when a particular piece of data changes. We'll also look at the difference between the effect itself, and how to clean up after itself.
React Hooks: Migration from Class to Function Components (robinwieruch.de)
Mar 26, 2019
This tutorial shows a migration path on how to write React Class Components as React Function Components with React Hooks. Therefore we will go into examples on how to migrate both state management and side-effects that are used in a Class Component to be used in a Function Component.
The State Reducer Pattern with React Hooks (kentcdodds.com)
Mar 25, 2019
A pattern for you to use in custom hooks to enhance the power and flexibility of your hooks.
How to integrate React Hooks into your project without changing your Redux code (medium.freecodecamp.org)
Mar 22, 2019
In this tutorial we will be going over how to integrate React Hooks into a React Redux project without changing the Redux code (reducers and actions) at all.
  • Mohammad Iqbal
A guide to useState in React (blog.logrocket.com)
Mar 19, 2019
useState is a hook that allows you to have state variables in functional components.
  • Esteban Herrera
How to detect an outside click with React and Hooks (medium.freecodecamp.org)
Mar 18, 2019
An outside click is a way to know if the user clicks everything BUT a specific component. You may have seen this behavior when opening a dropdown menu or a dropdown list and clicking outside of it to close it.
  • Andrei Cacio
Using React Hooks with Canvas (itnext.io)
Mar 17, 2019
In this tutorial I will use React Hooks to create an html canvas drawing website. I will start from zero using the Create React App starter kit. The resulting app offers basic features like Clear, Undo and saves drawings using localStorage.
  • Koen van Gilst
How to build a calculator with React Hooks and the React Context API (medium.freecodecamp.org)
Mar 14, 2019
This project is going to be a basic calculator app similar to the iPhone calculator. Since this is just a simple desktop app I have replaced the % button with a back button.
  • Theran Brigowatz
React Hooks: How to Get Started & Build Your Own (sitepoint.com)
Mar 14, 2019
React Hooks are special functions that allow you to “hook into” React features. For example, the useState hook allows you to add React state to a functional component. useEffect is another hook that allows you to perform side effects in function components. Side effects are usually implemented using lifecycle methods. With hooks, this is no longer necessary.
  • Michael Wanyoike
Deep dive: How do React hooks really work? (netlify.com)
Mar 11, 2019
In this article, we reintroduce closures by building a tiny clone of React Hooks. This will serve two purposes – to demonstrate the effective use of closures, and to show how you can build a Hooks clone in just 29 lines of readable JS. Finally, we arrive at how Custom Hooks naturally arise.
A Complete Guide to useEffect (overreacted.io)
Mar 10, 2019
You wrote a few components with Hooks. Maybe even a small app. You’re mostly satisfied. You’re comfortable with the API and picked up a few tricks along the way. You even made some custom Hooks to extract repetitive logic (300 lines gone!) and showed it off to your colleagues. “Great job”, they said.
Hooks, State, Closures, and useReducer (adamrackis.dev)
Mar 09, 2019
For those of us coming from a Redux background, useReducer can seem deceptively complex and unnecessary. Between useState and context, it’s easy to fall into the trap of thinking that a reducer adds unnecessary complexity for the majority of simpler use cases; however, it turns out useReducer can greatly simplify state management.
  • Adam Rackis
Reconciling the useEffect Tree (reacttraining.com)
Mar 08, 2019
I wanna talk a little bit about useEffect in React because I absolutely love it and I've noticed a bit of confusion about it in the community.
My Intuition on When to Use Custom React Hooks (frontarm.com)
Mar 06, 2019
Custom hooks are like mixins: they're a great way to share stateful and side-effectful functionality between components.
How to build a movie search app using React Hooks (medium.freecodecamp.org)
Mar 05, 2019
For this article, we will be building a very simple app using Hooks. In essence, we are not going to be using any class components in this application. And I will be explaining how a few of the APIs work and how they should be used in any application that we might be building.
  • Samuel Omole
Form Validation Using Custom React Hooks (upmostly.com)
Mar 04, 2019
Build a form validation engine using custom React Hooks, from scratch, without having to learn a single form library. Read on to learn how!
  • James King
How Are Function Components Different from Classes? (overreacted.io)
Mar 03, 2019
How do React function components differ from React classes? For a while, the canonical answer has been that classes provide access to more features (like state). With Hooks, that’s not true anymore.
Hooks for React.js - the new ketchup? (dev.to)
Mar 02, 2019
Hooks is the latest pattern and an experimental feature that's supposedly better than sliced bread or ketchup, you decide ;). Everyone used to go nuts over Render props but now it's all hooks.
  • Chris Noring
Creating a react-redux alternative with Hooks and Proxies (frontarm.com)
Feb 25, 2019
Learn to create a simple React/Redux integration using Hooks, then improve the performance using JavaScript Proxies.
  • Daishi Kato
Using Custom React Hooks to Simplify Forms (upmostly.com)
Feb 23, 2019
Use custom React Hooks to build forms that require half the code to write, are reusable, and are much easier to read. Read on to learn more!
  • James King
From Hooks to... Render Props? (frontarm.com)
Feb 22, 2019
Even old-school class components allow you to compose component state. Hooks just make your life far, far simpler.
useRedux — state management pattern with React Hooks (hackernoon.com)
Feb 20, 2019
Ever since React Hooks feature was announced and the API went public, I have been thinking about what this means for Redux — a well known state management library.
  • Jakub Šoltés
Refactoring a component to use React hooks (javascriptplayground.com)
Feb 20, 2019
React 16.8 introduced hooks; a new way to work with effects and state in React. No longer do React components that have state need to be ES2015 classes that extend React.Component - hooks let us write components as functions and still have all the functionality of class based components.
A quick guide to testing React Hooks (blog.logrocket.com)
Feb 20, 2019
Before we go on to see how to write tests for React Hooks, let’s see how to build a React app using Hooks. We’ll be building an app that shows the 2018 F1 races and the winners for each year.
  • Yomi Eluwande
React Nugget #2: Why do I love React Hooks? (vijayt.com)
Feb 20, 2019
There are lot of reasons to love React Hooks. But I have one reason that stands out from the rest.
  • Vijay Thirugnanam
React hooks: get the current state, back to the future (blog.castiel.me)
Feb 19, 2019
React Hooks are truly awesome, but the more I play with them the more I discover tricks, and sometimes spend a lot of time figuring out why my code doesn’t do what it is supposed to.
  • Sébastien Castiel
React Hooks Tutorial for Beginners (valentinog.com)
Feb 18, 2019
In this React hooks tutorial you will learn how to use React hooks, what they are, and why we’re doing it.
  • Valentino Gagliardi
Graceful GraphQL with React Hooks and MobX (levelup.gitconnected.com)
Feb 18, 2019
GraphQL meets React Hooks and forms a powerful friendship. They should connect with MobX too!
  • Daniel K.
React Hooks: Compound Components (kentcdodds.com)
Feb 18, 2019
How do compound components change with React hooks? A few weeks ago I did a DevTips with Kent livestream where I show you how to refactor the compound components pattern from a class component to a function component with React hooks.
A <Router /> with Hooks and Suspense (frontarm.com)
Feb 18, 2019
Navi is a new kind of router for React. It lets you declaratively map URLs to content, even when that content is asynchronous.
React Hooks: Beyond useState & useEffect (blog.bitsrc.io)
Feb 18, 2019
Time to take a step further into hooks and learn useReducer, useRef, useContext, and useMemo.
  • Aayush Jaiswal
A high level overview of React Hooks (reacttricks.com)
Feb 18, 2019
I started using React Hooks for my new projects and I love the simplicity of code and increased productivity. In this post I'll give you a high level overview of Hooks and how you can start using them now without having to learn everything there is to know about them.
  • Kristian Heruc
Build an Infinite Scroll Component in React using React Hooks (upmostly.com)
Feb 17, 2019
Today we’re going to dive deeper into React development and learn how to build an infinite scroll component in React using React Hooks. Let’s get started!
  • James King
Everything You Need to Create a Custom React Hook (telerik.com)
Feb 14, 2019
Let's learn what it takes to create a custom React Hook as well all of the rules we must keep in mind about using Hooks.
  • Eric Bishard
HTTP-API Integration with React Lifecycle-Methods and Hooks (dev.to)
Feb 14, 2019
When we create a Single Page Application (SPA), we often need to integrate APIs. Sometimes third-party APIs, but at least our own back-ends to get the data we need to display. These APIs are based on the HTTP or WebSocket protocol, each having its requirements for connection setup and tear down. In this article, I explain the basic integration of HTTP APIs.
  • Kay Plößer
Form Validation with React Hooks (itnext.io)
Feb 14, 2019
There are several React hooks available right now and I plan to detail in some of them, but this article is about building a custom hook only using the useState hook to validate a form data.
  • Sergio Marin
Should I useState or useReducer? (kentcdodds.com)
Feb 11, 2019
Two built-in React hooks that handle state, which one should you use? Whenever there are two things to do the same thing, people inevitably ask: "When do I use one over the other?"
Why I’m excited with React Hooks? (itnext.io)
Feb 11, 2019
On February 6 React 16.8 was released and with React 16.8, React Hooks are available in a stable release! That means we can start using Hooks without the fear of writing unstable code.
  • Sergio Marin
I used effects, said goodbye to my lifecycles, and feel 🙂 (dev.to)
Feb 11, 2019
Last week Hooks were finally added to React. It is now possible to use state in a function. At least, that much I remembered from watching the initial announcement way back when. But lifecycles though... I had no idea how they were supposed to work. I decided to read the docs and experiment.
  • Thomas Pikauli
Getting started with React Hooks — A simple guide (codeburst.io)
Feb 11, 2019
React Hooks officially got released a few days ago, and I would love to share some code snippets on how it’s been used. We’ll basically be diving into some of the hooks, and maybe a second part to discuss the others.
  • Ademola Adegbuyi
Custom react hooks (swizec.com)
Feb 11, 2019
This is a story full of wonderful new possibilities, beautiful codey things, and components clean as the mountain air. All thanks to custom react hooks.
Convert a React Class-Based Component to a Functional One Using a State Hook (alligator.io)
Feb 10, 2019
In this tutorial, we’re going to take a previously written class-based component and convert it into a functional component using the useState Hook.
  • Holly Girouard
Rethinking the component model with Hooks (sid.studio)
Feb 08, 2019
If you’re a fan of React, you might have already heard that the release with Hooks (v16.8) is here. I’ve been playing with the alpha version for a few weeks now and I really like it. The adoption hasn’t been all rainbows and unicorns though.
How to break the rules of React Hooks (inventingwithmonster.io)
Feb 07, 2019
React Hooks have finally landed! So many emotions. Here’s a small selection of my own in chronological order
  • Matt Perry
Write your first React Hook! (hashnode.com)
Feb 06, 2019
In this article, we're going to review how we were managing state in React, understand why React Hooks are really a game-changer and learn to write our very first React Hook.
  • Leonardo Maldonado
Intro to React Hooks (americanexpress.io)
Feb 06, 2019
This article will show you the fundamentals of programming React components using hooks. I’ll discuss the basic hooks built into React, and we’ll write a simple up/down counter component built with a custom hook.
  • Donavon West
useContext(): a React hook that's an obvious win (frontarm.com)
Feb 06, 2019
Hooks are a brand new API with a lot of hype. But don't let that fool you – useContext() is incredibly useful.
React v16.8: The One With Hooks (reactjs.org)
Feb 06, 2019
With React 16.8, React Hooks are available in a stable release!
How to Get Started With React Hooks: Controlled Forms (medium.freecodecamp.org)
Feb 04, 2019
Let’s go ahead to code a simple form first in a Stateful Component. We’ll rewrite the same form using Hooks and you can decide which one you like better.
  • Kevin Okeh
React Hooks, the rebirth of State Management and beyond (blog.usejournal.com)
Feb 04, 2019
In late 2018 React Hooks were announced, and within minutes, I knew they would change everything. I began tinkering with how hooks would change my application development, and the first massive wins were obvious
  • Tanner Linsley
Making setInterval Declarative with React Hooks (overreacted.io)
Feb 04, 2019
In this post, we’ll look at how to make intervals and Hooks play well together, why this solution makes sense, and which new capabilities it can give you.
Reusable Time Travel with React Hooks and Immer (frontarm.com)
Jan 30, 2019
Learn how and why to make a useTimeTravel React hook that we can use to make Tolerant User Interfaces.
Overview of React Hooks (auth0.com)
Jan 28, 2019
Learn what's new with React Hooks. For example, use state in a functional component.
  • Sarah Jorgenson
Intro to React Hooks (css-tricks.com)
Jan 18, 2019
Hooks make it possible to organize logic in components, making them tiny and reusable without writing a class.
  • Kingsley Silas
React Hooks: Making It Easier To Compose, Reuse, And Share React Code (exodevhub.com)
Jan 16, 2019
Hooks are an upcoming feature in React that enable you to use state and many other React features without writing a class. This has some important ramifications for the future of React code, especially with regard to how components will be composed.
  • Tom Bowden
Data Fetcher component using Hooks and Render Props (medium.com)
Jan 11, 2019
In most cases, applications that I work with just need to request data from the API and display the result. So, using a sophisticated library like Redux, only complicates the code and increases the bundle size without bringing much of a benefit.
  • Gasim Gasimzada
How hooks might shape design systems built in React (jeremenichelli.io)
Jan 09, 2019
If you use it regularly or play around with React to build stuff for the web, there’s a slight chance you heard about a little thing called hooks.
  • Jeremias Menichelli
How to Build React Apps Using Auth0 Popup Implementation + React Hooks (auth0.com)
Jan 09, 2019
Learn how to build a React application using React Hooks and add Authentication with Auth0, utilizing a popup login modal window.
  • Sarah Jorgenson
How I built an async form validation library in ~100 lines of code with React Hooks (medium.freecodecamp.org)
Jan 08, 2019
Form validation can be a tricky thing. There are a surprising number of edge cases as you get into the guts of a form implementation.
  • Austin Malerba
Understanding React Hooks — useState (blog.bitsrc.io)
Jan 07, 2019
Everything you need to know to start working with Hooks in React.
  • Chidume Nnamdi
Using MobX with React Hooks (part - 1) (dev.to)
Jan 05, 2019
A simple example of how we can use Mobx (a truly awesome state management library) with React Hooks
  • Ryan Dsouza
Developing React custom hooks for abortable async functions with AbortController (itnext.io)
Dec 31, 2018
In this article, I explain about the implementation of useAsyncTask.
  • Daishi Kato
Hooked on React (react.christmas)
Dec 24, 2018
Hooks change everything, let's explore some fun patterns!
React Hooks: What’s going to happen to my tests? (blog.kentcdodds.com)
Dec 24, 2018
How can we prepare our tests for React’s new hooks feature?
How to Use Basic React Hooks for Context (telerik.com)
Dec 18, 2018
The 16.7 release of React introduces an important new feature: React Hooks. Get "hooked" on React as we take a look at the useContext React Hook
  • Eric Bishard
Ho Ho Hooks (react.christmas)
Dec 17, 2018
A festive introduction to Hooks, and what you can do with them!
  • Markus Rauhut
Let me teach you React Hooks! (sid.studio)
Dec 07, 2018
To show you the value of hooks, I first have to show you how my workshops usually go.
React Hooks Explained - Functional Components With State (codingthesmartway.com)
Dec 07, 2018
In this tutorial we’ll explore State Hooks and Effect Hooks in a very practical way. By building real-world sample application from scratch you’ll be able to understand the concept and learn how you can apply React Hook in your application.
  • Sebastian Eschweiler
Introduction to React Hooks (alligator.io)
Dec 06, 2018
Learn about Hooks, an upcoming feature of React that has a lot of people excited about. We'll look especially as the useState and useEffect hooks.
  • Josh Sherman
Manage global state with React Hooks (itnext.io)
Dec 03, 2018
Since the announcement of experimental Hooks in React 16.7, they have taken the React community by storm.
  • Charles Stover
React Hooks Tutorial on Developing a Custom Hook for Data Fetching (itnext.io)
Nov 29, 2018
Besides stateful function components, this new feature allow us to build a custom hook to share logic between components.
  • Daishi Kato
How to Use Basic React Hooks for State and Effects (telerik.com)
Nov 29, 2018
With React Conf 2018 behind us, we have learned that with release 16.7 of React, an important new feature will be available: React Hooks.
  • Eric Bishard
React 16.x Roadmap (reactjs.org)
Nov 27, 2018
You might have heard about features like “Hooks”, “Suspense”, and “Concurrent Rendering” in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React.
5 Ways to Convert React Class Components to Functional Components w/ React Hooks (scotch.io)
Nov 19, 2018
Real world examples of how to convert React classes to React functional components using React 16.7 Hooks.
  • Peter Ekene
A deadly simple React bindings library for Redux with Hooks API (itnext.io)
Nov 17, 2018
In this article, we propose another bindings library to combine React and Redux. This library tries to be simple and easy for beginners. As of writing, this is still an experimental project and feedbacks are welcome.
  • Daishi Kato
An introduction to React Hooks (medium.freecodecamp.org)
Nov 14, 2018
React Hooks, a feature which is available in React v16.7.0-alpha, is something awesome you should know about.
  • Harsh Makadia
React Conf recap: Hooks, Suspense, and Concurrent Rendering (reactjs.org)
Nov 13, 2018
This year’s React Conf took place on October 25 and 26 in Henderson, Nevada, where more than 600 attendees gathered to discuss the latest in UI engineering.
  • Tom Occhino
Build a React To-Do App with React Hooks (No Class Components) (scotch.io)
Nov 13, 2018
Building a React App without Classes and using React 16.7 Hooks.
  • Sarah Jorgenson
Why React Hooks, and how did we even get here? (medium.freecodecamp.org)
Nov 12, 2018
Hooks have learned from the trade-offs of mixins, higher order components, and render props to bring us new ways to create contained, composable behaviors that can be consumed in a flat and declarative manner.
  • Ryan Yurkanin
How to fetch data with React Hooks? (robinwieruch.de)
Nov 12, 2018
A tutorial on how to fetch data in React with Hooks from third-party APIs. You will use state and effect hooks for the data request from a real API.
React Hooks (hswolff.com)
Nov 11, 2018
I definitely find React Hooks to be one of the most exciting new features that has hit React in a long time.
  • Harry Wolff
Add state and lifecycle methods to Function Components with React Hooks (itnext.io)
Nov 09, 2018
Let’s consider a simple to do list component. Nothing new or unusual so far. The component uses componentDidMount lifecycle method to fetch.
  • Kris Witalewski
An Introduction to Hooks in React (fullstackreact.com)
Nov 08, 2018
In this post, we're going to show you a bunch of examples on how to use hooks.
  • Yomi Eluwande
  • Nate Murray
Build a CRUD App in React with Hooks (taniarascia.com)
Nov 06, 2018
If you don’t know how to make a simple CRUD app in React, regardless of whether you use classes or hooks, this article will be good for you as well.
  • Tania Rascia
React hooks: not magic, just arrays (medium.com)
Oct 31, 2018
Untangling the rules around the proposal using diagrams
  • Rudi Yardley
4 Examples of the useState Hook (daveceddia.com)
Oct 30, 2018
Converting function components to classes is a pain. The useState hook can help. Here's how it works, and examples of how to use it.
How to Use the useReducer Hook (daveceddia.com)
Oct 30, 2018
How you can take advantage of the useReducer hook to manage complex state in your components, and what this new hook might mean for Redux.
React hooks in a nut shell (swizec.com)
Oct 29, 2018
I watched Ryan's talk 90% cleaner with hooks last night, Dan's and Sophie's talk announcing hooks this morning, read all the docs, and watched Twitter like a hawk. Hours of research condensed into the next 200 words because I love you.
Why React’s new Hooks API is a game changer (itnext.io)
Oct 28, 2018
React’s new Hooks API proposal allows us to finally share behaviour without any of the intrinsic problems that have plagued the community previously.
  • Rudi Yardley
A Simple Intro to React Hooks (daveceddia.com)
Oct 28, 2018
Learn how React's new Hooks feature works, and how Hooks can make your code cleaner and easier to write.
Getting Started with React Hooks (scotch.io)
Oct 27, 2018
React Hooks in React 16.7 allow us to write more feature rich functional components with useState() and useEffect().
  • Chris Sevilleja

Video Guides & Talks

Tips for using inline functions in React Hooks (youtube.com)
May 07, 2019
Using inline functions with React hooks can produce some unexpected results. I'll show you how to mitigate those issues and use them safely!
  • Tanner Linsley
Why I Love useReducer (youtube.com)
Apr 29, 2019
React Hooks have been out for a couple of months now. I’ve had the chance to play with them during that time and recently found an amazing example of where the useReducer Hook really shines.
  • Harry Wolff
How to return components from React hooks (youtube.com)
Apr 29, 2019
You may have been told that returning components from your hooks is a bad idea, and 90% of the time that's true for good reason. But once in a while, it helps to know that you can get around this limitation. I'll show you why and how.
  • Tanner Linsley
Painting Pixels with WebGL with React Hooks (youtube.com)
Apr 24, 2019
Let's explore how Hooks can make it easier to integrate powerful GPU-driven visuals into our React apps, giving us the best of both worlds: the power of WebGL with the ease and expressiveness of a React component tree.
  • Ashi Krishnan
Build your own state management in React with Hooks! (youtube.com)
Apr 23, 2019
Did you know you can use only React and hooks to build your own state management solution?! I'll show you how to use Hooks to invent your own state management solution in React.
  • Tanner Linsley
Using React.useReducer to avoid state bugs (youtube.com)
Mar 14, 2019
A while back I tweeted an issue I was having with a stopwatch component. I'm going to show you why it was happening and Dan's helpful solution to the problem using React.useReducer (and why React.useState wasn't well suited for this task).
useContext() + useReducer() = Magic? (youtube.com)
Feb 21, 2019
The React Context API can replace Redux - with React Hooks, it gets even more fun to use.
React.js Hooks Crash Course (youtube.com)
Feb 20, 2019
All you need to know to learn React Hooks - a feature that allows you to work with functional React components only. We'll dive into useState(), useEffect() and custom hooks in great detail.
Cancelling an Axios request in a useEffect hook (youtube.com)
Feb 19, 2019
This video shows how to cancel an Axios request before it completes. We'll use a useEffect hook and it's cleanup function to help us accomplish this.
Setting Up React Native Hooks (youtube.com)
Feb 16, 2019
Learn how to setup React Native to work with React Hooks.
Learn React Hooks: Live Examples and How Hooks Work With Gatsby (youtube.com)
Feb 14, 2019
Learn all about React Hooks and how they change the way we write components. Sidhartha Chatterjee teaches Jason Lengstorf what it means to write and refactor code with React Hooks, and shows off some new hooks that were just added to Gatsby.
  • Jason Lengstorf
  • Sidhartha Chatterjee
The useEffect hook and its lifecycle (youtube.com)
Feb 14, 2019
In this video we look at an issue I was having where state was being updated after the component had unmounted and the solution I came up with to solve that. What the heck is that 2nd argument for and did you know you can return a function from your useEffect function?
Let's HOOK up with React (youtube.com)
Feb 06, 2019
Going to be exploring a bunch of stuff about React hooks which was released today!
Custom fetch hook that works with React Suspense (youtube.com)
Jan 22, 2019
In this video we'll dive deep into suspense, creating a custom hooked called useFetchSuspense that will make an AJAX call with fetch, playing nicely with Suspense to handle showing the loading fallback component while the call is being asynchronously executed.
React Hooks: useImperativeHandle (youtube.com)
Jan 22, 2019
Honestly we're basically just going to play with the example in the docs.
How NOT to test custom React hooks (and how to test them) (youtube.com)
Jan 07, 2019
It can be tempting to try and call your custom hook manually and test it that way, but you'll run into the error "Hooks can only be called inside the body of a function component." And for good reason. Let's talk about why that is and the proper way to test a custom React hook.
Making Beats with React (youtube.com)
Dec 20, 2018
This talk will show how we can leverage React hooks and the ToneJs library to make a serious drum machine in the browser.
Create a custom useLocalStorage React hook (youtube.com)
Dec 10, 2018
Let's just make a quick little useLocalStorage hook
React Hooks with Apollo GraphQL (youtube.com)
Dec 08, 2018
We'll transform some React code using the Query component from Apollo GraphQL to use hooks! The code ends up being WAY cleaner and easier to reason about.
React Hooks Explained - Functional Components With State (youtube.com)
Dec 07, 2018
In this tutorial we'll explore State Hooks and Effect Hooks in a very practical way. By building real-world sample application from scratch you'll be able to understand the concept and learn how you can apply React Hook in your application.
  • Sebastian Eschweiler
React Hooks: Refactoring a render-prop-based component to use hooks! (youtube.com)
Nov 26, 2018
Going to be refactoring react-toggled to export a new fancy useToggle hook.
React Hooks: a Guided Tour (youtube.com)
Nov 23, 2018
Dave will give an introduction to hooks and the motivation behind them, show examples of hooks in practice, and explain how you can try them out yourself.
Why React Hooks (youtube.com)
Nov 18, 2018
Simplify and speed up your app with React Hooks.
Introducing React Hooks (youtube.com)
Nov 15, 2018
In this video we will look at the new "hooks" feature proposal in React 16.7, specifically the useState hook which allows us to store state in a functional component. We will also build a small todo app.
React Hooks: Advanced Hooks (youtube.com)
Nov 12, 2018
React Hooks is an exciting new (experimental) feature in the world of React.
  • Harry Wolff
React Hooks: Custom Hooks (youtube.com)
Nov 05, 2018
React Hooks is an exciting new (experimental) feature in the world of React.
  • Harry Wolff
React Hooks & testing: Stepping through React code (youtube.com)
Nov 05, 2018
I'm trying to figure out the best way to simplify testing of React components with react-testing-library.
React Hooks useContext (youtube.com)
Nov 01, 2018
Learn how to use the React Context API with function components. Using the useContext React Hook.
Using Immer with Reducers and React Hooks (youtube.com)
Oct 31, 2018
Learn how to simplify your reducers with Immer and integrate it with React Hooks.
Using React Hooks vs. Class Components (youtube.com)
Oct 30, 2018
I'm planning on using both React Hooks and Class Components.
Are React Hooks Slower than Class Components? (youtube.com)
Oct 29, 2018
React Hooks are not slower than Class Components.
React Hooks: A Complete Introduction (youtube.com)
Oct 29, 2018
React Hooks is an exciting new (experimental) feature in the world of React.
  • Harry Wolff
Fetching Data from an API with React Hooks useEffect (youtube.com)
Oct 28, 2018
Learn how to fetch data from an API using React Hooks useEffect.
Building a Todo List with React Hooks useState (youtube.com)
Oct 27, 2018
A walkthrough of building a Todo List with React Hooks. Specifically, useState.
What are React hooks? (youtube.com)
Oct 27, 2018
In this video we cover React hooks by refactoring a class based component into a functional component which takes advantage of the useState and useEffect hooks.
My Thoughts on React Hooks (youtube.com)
Oct 26, 2018
React Hooks is coming in React 16.7

Books & Guides

Reintroducing React (leanpub.com)
May 02, 2019
Modern React with Every React Update Since v16 Demystified (includes advanced hooks)
  • Ohans Emmanuel
React Hooks CheatSheet (react-hooks-cheatsheet.com)
Apr 14, 2019
React hooks cheatsheet with live editable examples.
  • Ohans Emmanuel
useHooks (usehooks.com)
Oct 29, 2018
Easy to understand React Hook recipes
  • Gabe Ragland

Courses & Video Series

Learn React Hooks by building a game (react.games)
Mar 15, 2019
The best way to learn a new tech is to build something with it. So, let's build a freaking game!
React Hooks For Everyone (leveluptutorials.com)
Mar 01, 2019
React Hooks are the latest new feature to arrive in React. Make your function based components more useful than ever before and learn how to build reusable functionality with custom hooks.
Reusable State and Effects with React Hooks (egghead.io)
Dec 10, 2018
As I introduce the concepts of React hooks, I'll apply those concepts in various demos to see how they apply in different scenarios. I'll be converting Class Components to Function Components so you can see how they relate to each-other.
Simplify React Apps with React Hooks (egghead.io)
Dec 03, 2018
In this course, Kent will take a modern React codebase that uses classes and refactor the entire thing to use function components as much as possible.

Podcast Episodes

Linked Lists in the Wild: React Hooks with Conlin Durbin (devchat.tv)
May 07, 2019
The panel discusses Conlin’s article "Link Lists in the Wild: React Hooks".
React Hooks (spec.fm)
Feb 28, 2019
We join in the flavour of the moment and talk about Hooks and why everyone should be maybe rewriting everything into them.
  • Una Kravets
  • Chris Dhanaraj
RRU 045: React Hooks with Dave Ceddia (devchat.tv)
Jan 23, 2019
Hooks are Mixins with Ryan Florence (reactpodcast.com)
Dec 04, 2018
Ryan Florence is the co-creator of React Router and creator of accessibility-first React libraries Reach Router and Reach UI. Chantastic sits with him to talk about Hooks on the night before they're announced. They talk about React's API growth, if Suspense has taken React to framework-land, what caches and resources mean for developers, and the rebirth of mixins as Hooks.
Don't Rewrite Your App for Hooks and Suspense with Jared Palmer (reactpodcast.com)
Nov 20, 2018
Jared Palmer is a passionate JavaScript developer, pushing developer ergonomics in React with projects like formik and react-fns. Chantastic asks about what Suspense and Hooks mean for existing apps and what we should know to migrate our code sanely. They discuss why doing away with render props is a good thing, why Hooks are up to the task, and how Hooks and Suspense will impact libraries like formik, react-fns, and the-platform.
React Hooks (syntax.fm)
Nov 14, 2018
In this episode Wes and Scott discuss React Hooks - what they are, why you might want to use them, their differences with regular classes, and more.
React Today and Tomorrow with the React Core Team (reactpodcast.com)
Oct 31, 2018
The React core team sits down with Michael Jackson to discuss React today and tomorrow. They talk Concurrent Mode, Suspense, Hooks, the new profiler tab, scheduling in the browser, React Fire, React Fusion, becoming more framework-y, appearing less JavaScript-y, and why you shouldn’t worry about the second argument of useEffect.

Libraries

react-hook-form (react-hook-form.now.sh)184
v3.7.0
May 19, 2019
React hook form validation without the hassle.
    react-hanger (github.com)1011
    v1.2.0
    Apr 09, 2019
    A small collection of useful hooks.
    • Kitze
    retoggle (github.com)1211
    v0.3.0
    Feb 28, 2019
    Retoggle is a collection of React hooks which provides UI toggles to manipulate your component state from outside.
    • Raathi Kugarajan
    react-native-hooks (github.com)941
    v0.0.6
    Oct 31, 2018
    React Native APIs turned into React Hooks allowing you to access asynchronous APIs directly in your functional components.
    • Melih Berberoglu