Using React Hooks

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

Articles & Tutorials

How to Build a React Application with Load More Functionality using React Hooks (freecodecamp.org)
Apr 27, 2021
In this article, we will build a React application using class components. Then we'll convert it to functional components using React Hooks in a step-by-step way.
  • Yogesh Chavan
Using React Hooks to create sticky headers (blog.logrocket.com)
Apr 05, 2021
For many developers, implementing a sticky header on a table before the CSS property position: sticky was challenging. In this article, we are going to look at building a sticky header using React Hooks.
  • Fortune Ikechi
How to Create Your First React Hook from Start to Finish (freecodecamp.org)
Apr 02, 2021
You can use custom React hooks to solve many different real-world problems in your React projects.
  • Reed Barger
Conditional React Hooks (kyleshevlin.com)
Mar 30, 2021
You want to conditionally call a hook, but you can't do that because of rules. What do you do?
  • Kyle Shevlin
Debounce and Throttle Callbacks with React Hooks (kyleshevlin.com)
Mar 23, 2021
This one will be short and to the point. I recently ran into a problem while trying to create a debounced callback with React hooks.
  • Kyle Shevlin
useCallback and useRef: Two React Hooks You Should Learn (telerik.com)
Mar 10, 2021
Learn how to use the useCallback hook to avoid unnecessary re-renders in our application, and the useRef hook to keep track of references.
  • Leonardo Maldonado
How to use React's useEffect() hook (felixgerschau.com)
Mar 10, 2021
In this article I want to explain everything you need to know about the useEffect React hook.
  • Felix Gerschau
How to Build Your Own React Hooks: A Step-by-Step Guide (freecodecamp.org)
Mar 05, 2021
In this step-by-step guide, I will show you how to create your own custom React hooks by breaking down three hooks I've made for my own applications, along with what problems they were created to solve.
  • Reed Barger
The ultimate guide to the React useReducer Hook (blog.logrocket.com)
Mar 02, 2021
useReducer is one of the additional Hooks that shipped with React 16.8. An alternative to the useState Hook, it helps you manage complex state logic in React applications.
  • Ejiro Asiuwhu
A TypeScript trick for reusable hooks (swizec.com)
Feb 19, 2021
How do you write a reusable React hook? Oh that's easy, every hook is reusable!
Wrapping React.useState with TypeScript (kentcdodds.com)
Jan 22, 2021
How to make a custom hook that wraps useState with TypeScript properly.
Using Hooks with React Router (blog.logrocket.com)
Jan 21, 2021
In this tutorial, we’ll show you how to use Hooks with React Router and minimize code lines in a component.
  • Gaurav Singhal
5 top React Hooks libraries compared (blog.logrocket.com)
Jan 15, 2021
In this article, we’ll look at five useful React Hooks libraries and compare their utility.
  • John Au-Yeung
React useReducer with Middleware (robinwieruch.de)
Dec 10, 2020
In this React Hooks tutorial, I want to show you how to use a middleware for React's useReducer Hook. This middleware would run either before or after the state transition of the reducer and enables you to opt-in features.
How to Test React.useEffect (epicreact.dev)
Dec 04, 2020
So, you've got some code in React.useEffect and you want to know how to test it. This is a pretty common question. The answer is kinda anti-climatic and general.
Sticky Table Header with React Hooks (webup.org)
Dec 01, 2020
Using a <table /> element instead of flexbox for data presentation is a good thing. How to turn the table header sticky with the help of React in that case? How to apply the solution into a production code? This blog post is all about that.
  • Miroslav Nikolov
How React Hooks Work in simple words? (dev.to)
Nov 13, 2020
A Hook is a react function that lets you use state and react features from a function based component. Hooks let you use the functions instead of switching between HOCs, Classes, and functions. As Hooks are regular Javascript functions, thus you can use the built-in Hooks and create your own custom one. So the solution to your problem will be a "one-liner" now.
  • Akshay Palekar
Why you should adopt React Hooks instead of classes (blog.logrocket.com)
Nov 12, 2020
In this post, we will look at functional components using React Hooks that were introduced in version 16 of React and why you should use them over class components.
  • Nwose Lotanna
The last guide to the useEffect Hook you’ll ever need (blog.logrocket.com)
Nov 04, 2020
The goal of this comprehensive article is to gather information about the underlying concepts of useEffect and, in addition, to provide learnings from my own experience with the useEffect Hook.
  • Sebastian Weber
Best Practices with React Hooks (blog.bitsrc.io)
Oct 26, 2020
In this post, I will share 6 tips about React Hooks that will be useful to keep as a guideline as you implement hooks into your components.
  • Nathan Sebhastian
Throttling data requests with React Hooks (blog.logrocket.com)
Oct 21, 2020
When an application loads data, typically, relatively few HTTP requests are made. For example, if we imagine we’re making a student administration application, then a “view” screen might make a single HTTP request to load that student’s data before displaying it.
  • John Reilly
Why React Hooks over HOCs (robinwieruch.de)
Oct 01, 2020
I am still an advocate for higher-order components these days, because there composable nature of enhancing components fascinates me. However, there are problems with HOCs which shouldn't be denied and which are entirely solved by React Hooks.
Controlled Inputs Using React Hooks (dmitripavlutin.com)
Sep 29, 2020
There are 2 approaches to access the value of an input element in React. In the first approach, named uncontrolled input, you access the value from a reference to the input element. The second approach, which I like because it doesn’t use references, is using a controlled input. Let’s see how to design controlled inputs using React hooks.
  • Dmitri Pavlutin
Myths about useEffect (epicreact.dev)
Sep 24, 2020
I've taught React to tens of thousands of developers. Before and after hooks were released. One thing I've observed is people tend to struggle with the useEffect hook and there are some common hang-ups for them that I'd like to address here.
A Complete Beginner's Guide to React: Hooks Edition (welearncode.com)
Sep 15, 2020
A few years ago, I wrote an introductory React tutorial based on a workshop I taught. Since that point in history, I've taught hundreds of new web developers React, and the library has evolved significantly. I thought it was time to come back to the fundamentals and discuss learning React from absolute zero in the era of Hooks.
  • Ali Spittel
Fix useEffect re-running on every render (daveceddia.com)
Aug 04, 2020
If your useEffect function is running too often, triggering on every change, look at its dependencies. Here we use the functional form of setState to reduce how often the effect runs.
Tic-Tac-Toe in React (kyleshevlin.com)
Aug 02, 2020
In this blog post, Kyle Shevlin teaches you how to build tic-tac-toe in React using CSS grid and the `useReducer` hook.
  • Kyle Shevlin
How to useMemo in React (robinwieruch.de)
Jul 13, 2020
React's useMemo Hook can be used to optimize the computation costs of your React function components. We will got through an example component to illustrate the problem first, and then solve it with React's useMemo Hook.
How to useCallback in React (robinwieruch.de)
Jul 06, 2020
React's useCallback Hook can be used to optimize the rendering behavior of your React function components. We will go through an example component to illustrate the problem first, and then solve it with React's useCallback Hook.
How to Create a Custom useCopyToClipboard React Hook (reedbarger.com)
Jun 23, 2020
On my website, reedbarger.com, I allow users to copy code from my articles with the help of a package called react-copy-to-clipboard.
  • Reed Barger
Learn React Hooks by Building a Paint App (freecodecamp.org)
Jun 05, 2020
According to people in the know, React Hooks are hot, hot, hot. In this article, we follow Christian Jensen's 14-part tutorial to find out about the basics of this new feature of React.
  • Per Harald Borgen
The post-Hooks guide to React call order (blog.logrocket.com)
Jun 03, 2020
The goal of this article — in addition to stressing that writing Hooks requires a different mindset than writing class components — is to give you a better overview of how, exactly, the whole React component lifecycle works. That is to say, in what order the code is being executed in your app.
  • Rafael Quintanilha
Learn How to Build Tic-Tac-Toe with React Hooks (freecodecamp.org)
May 29, 2020
The example game is pulled from React's official tutorials but is brought up to date using React hooks - the latest hot topic in the React world.
  • Per Harald Borgen
The Beginners guide to React Hooks - A Brain Friendly Guide on useState and useEffect (jschris.com)
May 26, 2020
“What the hell are hooks?” I found myself asking this just as I thought I had covered all the basis of React. Such is the life of a frontend developer, the game is always changing. Enter Hooks.
  • Chris Blakely
A Visual Guide To React Mental Models, Part 2: UseState, UseEffect And Lifecycles (obedparla.com)
May 25, 2020
This is the second of a three-part series of articles around React mental models. I’ll show you the exact mental models I use with complex React components by building them from the ground up and by using lots of visual explanations.
  • Obed Parlapiano
Break Out Your Component Logic with Hooks (kyleshevlin.com)
May 19, 2020
One pattern I've come to appreciate is breaking out the logic of a component into a custom hook, and then, only destructuring the parts of the hook's API my component needs.
  • Kyle Shevlin
Add an Item to a List in React (robinwieruch.de)
May 14, 2020
It's a common task in React to add an item to a list. Here I want to show you briefly how this works. Every time you want to modify something in React, for example a list where you want to add an item, you have to use React's state management.
Will React Classes Get Deprecated Because of Hooks? (blog.bitsrc.io)
May 13, 2020
React Hooks are a complete and better replacement for Classes. Will React Classes stay with us much longer?
  • Fernando Doglio
Rethinking web audio feedback with the useSound Hook (blog.logrocket.com)
May 11, 2020
Consider important notifications, new messages in chats when a user has navigated away from the tab or browser, and so on. This is where the useSound Hook becomes really useful. It helps to seamlessly integrate sound into your React-based UI.
  • Olasunkanmi John Ajiboye
Building a Trello clone with React Hooks and GraphQL (blog.logrocket.com)
May 11, 2020
This article explains how to build a Trello-like application using React Hooks and a GraphqQL server. Before jumping into the application, let me give you an explanation for why we need to build this.
  • Ganesh Mani
Replacing React Lifecycle Methods with Hooks: A Comprehensive Guide (blog.bitsrc.io)
May 04, 2020
Using Hooks to replace componentDidMount, componentWillUnmount, componentWillReceiveProps, componentDidUpdate.
  • John Au-Yeung
Fetching Data in React using Hooks (blog.bitsrc.io)
Apr 28, 2020
Making network requests, memoizing, and handling errors using React hooks.
  • Chidume Nnamdi
Getting Started With The React Hooks API (smashingmagazine.com)
Apr 10, 2020
In this tutorial, you are going to learn and understand what React hooks are, the basic React Hooks that are available and also examples of how to write them for your React applications. In the process, you will also get to know about some additional hooks that were shipped with React 16.8 and also how to write your own custom React Hooks.
  • Shedrack Akintayo
Working with React Hooks and TypeScript (toptal.com)
Apr 08, 2020
Hooks were introduced to React in February 2019 to improve code readability. We already discussed React hooks in previous articles, but this time we are examining how hooks work with TypeScript.
  • Nicolas Zozol
Lifecycle methods with the useEffect Hook (blog.logrocket.com)
Apr 08, 2020
React brought us a few different concepts, for example, the virtual DOM. It also introduced us to different libraries and new ways of solving problems that we might face in development. With this, we’re always improving our code to create more maintainable and well-written applications.
  • Leonardo Maldonado
How to Build Custom Forms with React Hooks (telerik.com)
Mar 31, 2020
Creating forms in React has become so easy now. We're going to learn how we can create custom forms using Hooks, and remove the necessity of downloading a ton of libraries for our applications.
  • Leonardo Maldonado
11 Useful Custom React Hooks for Your Next Web App (blog.bitsrc.io)
Mar 26, 2020
Top 11 recommended ReactJS custom Hooks — with examples.
  • Chidume Nnamdi
How to test custom React hooks (kentcdodds.com)
Mar 24, 2020
Get confidence your custom React hooks work properly with solid tests.
Comparing hooks libraries for GraphQL (blog.logrocket.com)
Mar 24, 2020
There are two major React Hooks libraries: graphql-hooks and apollo/react-hooks. To help you determine which library is best for your next GraphQL project, let’s compare them, examine their features, and weigh the pros and cons.
  • Ganesh Mani
Building a CRUD App with React Hooks & the Context API (alligator.io)
Mar 16, 2020
This article will be covering React hooks, introduced in version 16.8 and the Context API, introduced in 16.3 and mixing them together to build a fully functional CRUD application.
  • Ishan Manandhar
React Hooks with Firebase Firestore (blog.logrocket.com)
Mar 11, 2020
What do React Hooks and Firebase have in common? They both accelerate development and reduce the amount of code you need to write to build something that would otherwise be complex.
  • Brian De Sousa
React: Hooks vs. Render Props vs. Higher-Order Components (dev.to)
Mar 05, 2020
When deciding between hooks, render props and higher-order components, always go with hooks wherever possible.
  • Lucas Chen
Loading React Components Dynamically with Hooks (alligator.io)
Jan 24, 2020
Dynamic sites need flexibility. Flexibility results in more code. More code means increased maintenance time. How can we keep our sites maintainable and fast?
  • Sung M. Kim
Using React Hooks in Gatsby (alligator.io)
Jan 22, 2020
JavaScript treats functions as first-class citizens. And we can see this in React now more than ever with the introduction of Hooks in version 16.8. They allow for state manipulation and side-effects on functional components.
  • Juan Villela
How to get previous props/state with React Hooks (blog.logrocket.com)
Jan 01, 2020
Accessing the previous props or state from within a functional component is one of those deceptively simple problems you’ll likely face as you work with React Hooks.
  • Ohans Emmanuel
Implementing the Container Pattern using React Hooks (blog.bitsrc.io)
Dec 31, 2019
How to use the useState hook to create a functional container component.
  • Sonny Recio
Replacing Redux with React Hooks (leighhalliday.com)
Dec 18, 2019
Redux has been the go-to way to manage state within your React application for years. It's popularity is due in large part because when it was introduced, it solved a number of problems which were difficult to do in vanilla React on its own.
How to Fetch Data with React Hooks (rahmanfadhil.com)
Dec 14, 2019
In this tutorial, we're going to learn about new React feature called "Hooks". Well, I have written a lot of tutorials about React Hooks itself, but in this parcticular post, we're going to learn how we can send an HTTP request asynchronously with this awesome React feature.
  • Rahman Fadhil
Home-baked Hooks (react.christmas)
Dec 13, 2019
About a year ago, Sophie Alpert and Dan Abramov presented one of the most exciting new features in React: Hooks.
  • Nicolai August Hagen
  • Markus Rauhut
Testing Custom React Hooks with Jest (newline.co)
Dec 10, 2019
Hooks in React are a new, popular, and extensible way to organize side-effects and statefulness in React components. By composing the base hooks provided by React, developers can build their own custom hooks for use by others.
  • James P. Fulford
Manage Global State with Context API and Hooks (react.christmas)
Dec 07, 2019
For quite some time, Redux has been React developers go-to library for managing their app’s global state. It’s a great tool – but do you really need it?
  • Jonas Løchsen
A Look at the React useMemo Hook (alligator.io)
Dec 06, 2019
You may have seen, released along with React Hooks, a strange hook called useMemo. What could this strange, alien hook mean and what is it used for? Most importantly, how can it help you and why do you need to know about it?
  • Stephen Hartfield
Building reusable UI components with React Hooks (blog.logrocket.com)
Dec 03, 2019
In this tutorial, we will build reusable React components that can be used throughout your projects to maintain consistency in logic and presentation. We’ll use Hooks for managing and manipulating state data.
  • Peter Ekene Eze
Understanding the React useReducer Hook (alligator.io)
Nov 27, 2019
If you are at all familiar with reducers, you should have a good understanding of what React’s useReducer hook does. Plain and simple, it allows functional components in React access to reducer functions from your state management.
  • Stephen Hartfield
The React useContext Hook in a Nutshell (alligator.io)
Nov 26, 2019
Early February 2019, React introduced Hooks as a way to rewrite your components as simple, more manageable, and classless. useContext is one of the built-in Hooks, giving functional components easy access to your context.
  • Stephen Hartfield
Use Hooks + Context, not React + Redux (blog.logrocket.com)
Nov 25, 2019
In this article, I will introduce the React Context API for state management and show you what makes React Hooks plus the Context API a better solution than Redux.
  • Ebenezer Don
The Modern Way to Use Promise- Based HTTP Requests: axios-hooks (medium.com)
Nov 23, 2019
React Hooks for axios, with built-in support for server-side rendering.
  • Riccardo Giorato
React Global State Management with Hooks (itnext.io)
Nov 23, 2019
I was recently working on a Next.js project and wanted a few pieces of global state. I didn’t really want to go through all the setup for redux (nothing against redux, I love redux) so I decided to implement my own simple version of it using hooks.
  • Mark Sauer-Utley
How is getSnapshotBeforeUpdate implemented with Hooks? (blog.logrocket.com)
Nov 20, 2019
The short answer is getSnapshotBeforeUpdate can’t be implemented with Hooks. However, the more interesting question is why not? And what can we learn from implementing this ourselves?
  • Ohans Emmanuel
Countdown Timer with React Hooks (alligator.io)
Nov 20, 2019
Building a countdown timer is a great way to leverage the power of React’s automatic updating of elements and can use make use of hooks to track the amount of time left on the timer.
  • Josh Sherman
Learn React Hooks in 5 minutes - A Beginner's Tutorial (freecodecamp.org)
Nov 06, 2019
Sometimes 5 minutes is all you've got. So in this article, we're just going to touch on two of the most used hooks in React: useState and useEffect.
  • Bob Ziroll
Solutions to frustrations with React Hooks (blog.logrocket.com)
Nov 04, 2019
One of my previous posts, Frustrations with React Hooks, got an incredible amount of views and topped hacker news at one point. The post also got lots of comments, some of which have changed how I view Hooks and given me a completely new and positive way of viewing them.
  • Paul Cowan
How to Use Context API with Hooks Efficiently While Avoiding Performance Bottlenecks (telerik.com)
Oct 25, 2019
Context API is a great feature offered by React, but it can be tricky to get it right. Learn how to efficiently create and consume Context API with the use of React Hooks without performance issues.
  • Thomas Findlay
How to useContext in React? (robinwieruch.de)
Oct 19, 2019
React's Function Components come with React Hooks these days. Not only can React Hooks be used for State in React but also for using React's Context in a more convenient way. This tutorial shows you how to use React's useContext Hook.
Writing a custom React hook: Google Places autocomplete (sebastiandedeyne.com)
Oct 11, 2019
I built a small React component that uses the Google Places API to autocomplete an address in a project I’m working on, and extracted the predection fetching to a custom useAddressPredictions hook. It’s a nice example of a custom React hook composed of different primisite hooks, so I decided to pen write my thought process while building it.
  • Sebastian De Deyne
How to Convert React Hooks into HOCs for Legacy Components (freecodecamp.org)
Oct 07, 2019
Scenario: You made this beautiful custom hook and you're happily using it in your new function components. You then realize that this custom hook could be used in one of your older class-based components, so you try to use it by dropping it in like so…
  • Rico Kahler
Popular React Hook libraries (blog.logrocket.com)
Oct 03, 2019
In this blog post, I will depict how Hooks are lifesavers. I will illustrate a couple of use cases that will feature popular React Hook libraries – both mainstream and custom (created by enthusiasts like you and me).
  • Raphael Ugwu
How to build a React Hooks front-end app with routing and authentication (freecodecamp.org)
Sep 30, 2019
In this tutorial, we will go over how to build a complete front end app with routing and authentication.
  • Mohammad Iqbal
How to Create and Test React Custom Hooks (blog.bitsrc.io)
Sep 24, 2019
A quick React Custom Hooks tutorial — with examples!
  • Shubham Zanwar
When to useLayoutEffect Instead of useEffect (daveceddia.com)
Sep 20, 2019
There are two React hooks, useEffect and useLayoutEffect, that appear to work pretty much the same.
Thinking in React Hooks (wattenberger.com)
Sep 19, 2019
React introduced hooks one year ago, and they've been a game-changer for a lot of developers. There are tons of how-to introduction resources out there, but I want to talk about the fundamental mindset change when switching from React class components to function components + hooks.
  • Amelia Wattenberger
Getting Familiar with useEffect: Part Two (moonhighway.com)
Sep 17, 2019
Last week, we took a closer look at the useEffect Hook, but we still have yet to touch on one of the function's most important features: the dependency array.
State management using only React Hooks (blog.logrocket.com)
Sep 16, 2019
By the end of this article, you should be able to manage your application’s state in a predictable manner without any third-party package.
  • Ovie Okeh
React Hooks: Recipes (codeburst.io)
Sep 11, 2019
An article providing concrete examples of why and how one uses most of the React Hooks.
  • John Tucker
Why We Switched to React Hooks (blog.bitsrc.io)
Sep 11, 2019
Have you ever been tasked with extending a component that has a ton of branching logic, and realize that the component requires some state to make that new feature you’re adding come to life?
  • Duggie Mitchell
Getting Familiar with useEffect: Part One (moonhighway.com)
Sep 10, 2019
Rendering is the heartbeat of a React application. When something changes (props, state), the component tree re-renders, reflecting that change in the user interface. But what happens when we need to do something after a render? As you might imagine, there's a Hook for that.
Frustrations with React Hooks (blog.logrocket.com)
Sep 09, 2019
Before I detail my current frustrations with Hooks I do want to state for the record that I am, for the most part, a fan of Hooks.
  • Paul Cowan
State management with React Hooks (freecodecamp.org)
Sep 09, 2019
For this article, we will be working with a pattern for managing state using two very important Hooks, useContext and useReducer, to build a simple music gallery app. The application will have only two views: one for login and the other to list the songs in that gallery.
  • Samuel Omole
How I Developed React Hooks for Web Workers (blog.axlight.com)
Sep 08, 2019
Making Use of Async Generators
  • Daishi Kato
Hooked on Hooks (medium.com)
Sep 05, 2019
Lately, I’ve been trying to level up my JavaScript and React/React Native skills so I’ve been making silly side projects. The past week or so I have been working on a random cat gif app using the Giphy API in an Expo project.
  • Erin Fox
How to implement useState with useReducer (kentcdodds.com)
Aug 31, 2019
A fun exercise to help understand the differences and use cases of these two related hooks.
Handling complex form state using React Hooks (itnext.io)
Aug 29, 2019
An alternative to some goodness of this.setState()
  • Aditya Loshali
An introduction to React's useEffect() hook (frontarm.com)
Aug 25, 2019
Learn about effects – a declarative approach to interacting with the world outside your app. With live demos, interactive exercises, and fractals.
Using requestAnimationFrame with React Hooks (css-tricks.com)
Aug 21, 2019
Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way.
  • Hunor Márton Borbély
You’re overusing useMemo: Rethinking Hooks memoization (blog.logrocket.com)
Aug 14, 2019
In my experience, there are two main categories where I’ve found useMemo to be irrelevant, overused, and likely harmful to the performance of your application.
  • Ohans Emmanuel
Building Custom React Hooks (dev.to)
Aug 13, 2019
In the following example, we’ll establish a solid pattern for building custom hooks and go through some of the best practices.
  • Adrian Bece
useReducer + useContext for easy global state without libraries (swizec.com)
Aug 12, 2019
Since useAuth is taking off, I wanted to talk about the global state management technique that makes it work. You might find it useful too, or think it’s obvious, I was pretty excited when it clicked.
useEffect vs. useLayoutEffect in plain, approachable language (blog.logrocket.com)
Aug 08, 2019
Assuming you really understand the difference between useEffect and useLayoutEffect, can you explain this difference in simple terms? Can you describe their nuances with concrete, practical examples?
  • Ohans Emmanuel
Building a carousel component in React using Hooks (blog.logrocket.com)
Aug 08, 2019
In this article, we look at implementing a carousel that tries to simplify the entanglement by using React Hooks.
  • Florian Rappl
Apollo Client, now with React Hooks (blog.apollographql.com)
Aug 06, 2019
Today we’re thrilled to announce the addition of React Hooks to Apollo Client!
  • Hugh Willson
5 Tips to Help You Avoid React Hooks Pitfalls (kentcdodds.com)
Aug 05, 2019
Let's explore some hook gotchas and how to avoid them.
Making API Calls with React Hooks (blog.bitsrc.io)
Aug 05, 2019
This article will help you take the baby steps in using React Hooks, it will explain all the basic approach which you can take to make the most out of this beautiful feature.
  • Harsh Makadia
A Performant Solution for Replacing Redux with React Context and Hooks (silvenon.com)
Aug 02, 2019
To understand all the crucial concepts behind this, we’ll create a button which fetches dad jokes from icanhazdadjoke and displays them. This minimal example is all we need.
  • Matija Marohnić
Run useEffect Only Once (css-tricks.com)
Jul 30, 2019
useEffect will run when the component renders, which might be more times than you think. I feel like I've had this come up a dozen times in the past few weeks, so it seems worthy of a quick blog post.
  • Chris Coyier
Why React Hooks? (tylermcginnis.com)
Jul 29, 2019
The first thing you should do whenever you’re about to learn something new is ask yourself two questions - Why does this thing exist? What problems does this thing solve?
How to write 90% cleaner code with Hooks (dev.to)
Jul 28, 2019
This article is my attempt to explain: Why hooks were introduced; How can we prepare ourselves for this API; How can we write 90% cleaner code by using React Hooks.
  • Amandeep Singh
How to Use the setState Callback in React (upmostly.com)
Jul 28, 2019
To perform an action in a React component after calling setState, such as making an AJAX request or throwing an error, we use the setState callback.
  • James King
How I developed a Concurrent Mode friendly library for React Redux (blog.axlight.com)
Jul 27, 2019
I have been developing several React hooks libraries for months. In this post, I will explain why and how I developed a React Redux binding library with React hooks. The library is implemented to be concurrent mode friendly. Let’s discuss why it’s important and what’s the technique behind it.
  • Daishi Kato
How to Build a TODO List with React Hooks (blog.educative.io)
Jul 24, 2019
What Are Hooks? They’re functions that give you React features like state and lifecycle hooks without ES6 classes.
  • Yazeed Bzadough
How to use the useReducer React hook (flaviocopes.com)
Jul 23, 2019
Find out what the useReducer React hook is useful for, and how to work with it!
Effortless render optimization with state usage tracking with React hooks (blog.axlight.com)
Jul 21, 2019
useContext is not specifically designed for global state and there’s a caveat. Any change to context value propagates all useContext to re-render components.
  • Daishi Kato
How to use the useMemo React hook (flaviocopes.com)
Jul 20, 2019
Find out what the useMemo React hook is useful for, and how to work with it!
How to use the useEffect React hook (flaviocopes.com)
Jul 19, 2019
Find out what the useEffect React hook is useful for, and how to work with it!
How to use the useCallback React hook (flaviocopes.com)
Jul 18, 2019
Find out what the useCallback React hook is useful for, and how to work with it!
How to build a reusable animation component using React Hooks (freecodecamp.org)
Jul 18, 2019
Animations delight users. And you’d think, by the sheer volume of articles, that React Hooks delight developers. But for me, fatigue was starting to creep into my opinions on Hooks.
  • Christian Sepulveda
How to use the useState React hook (flaviocopes.com)
Jul 17, 2019
Find out what the useState React hook is useful for, and how to work with it!
Build a Chat App Using React Hooks in 100 Lines of Code (css-tricks.com)
Jul 15, 2019
We’re going to see how hooks make our development process easier and faster by building a chat application.
  • Akash Joshi
Thoughts on React Hooks, Redux, and Separation of Concerns (blog.isquaredsoftware.com)
Jul 10, 2019
Some observations on the tradeoffs involved in using React hooks.
  • Mark Erikson
How React Hooks can replace React Router (blog.logrocket.com)
Jul 04, 2019
We are going to explore other possibilities and look at how we can improve the routing experience in React apps using hooks.
  • Peter Ekene Eze
React hooks useState and useReducer are equivalent in theoretical expressiveness (blog.axlight.com)
Jul 01, 2019
It turns out that useState is as powerful as useReducder in terms of expressiveness. This is because useState allows functional updates. Even with deep updates, you can pass down custom callbacks.
  • Daishi Kato
Creating React usePosition() hook for getting browser’s geolocation (itnext.io)
Jun 30, 2019
In this article we’ll create a React usePosition() hook to fetch and follow browser’s location. Under the hood we’ll use getCurrentPosition and watchPosition functions that are provided by global object navigator.geolocation.
  • Oleksii Trekhleb
Let's learn React Hooks and Context API by building a Recipe Search App (dev.to)
Jun 29, 2019
This is a beginner tutorial in understanding React Hooks and the Context API.
  • Ola John Ajiboye
Getting to Know the useReducer React Hook (css-tricks.com)
Jun 26, 2019
useReducer is one of a handful of React hooks that shipped in React 16.7.0. It accepts a reducer function with the application initial state, returns the current application state, then dispatches a function.
  • Kingsley Silas
Simplifying state initializers with React Hooks (blog.logrocket.com)
Jun 25, 2019
What is the state initializer pattern? How does it work? Why is it important, and more importantly, how is the pattern implemented with Hooks? I hope to provide answers to these questions in this article.
  • Ohans Emmanuel
Avoiding recursive useEffect hooks in React (javascriptplayground.com)
Jun 20, 2019
A short post today about an easy tactic to avoid your useEffect calls becoming recursive when setting state.
Forget about component lifecycles and start thinking in effects (sebastiandedeyne.com)
Jun 20, 2019
React components have always relied on lifecycle methods for side effects. While lifecycle methods get the job done, they’re often overly verbose and have large margins for error.
  • Sebastian De Deyne
Simplifying React State and the useState Hook (upmostly.com)
Jun 18, 2019
In this lesson, we’ll cover React state, how it works, and how we can use the useState Hook to build a simple dice rolling app. Let’s begin!
  • James King
React Hooks and Component Composition (telerik.com)
Jun 17, 2019
This time we’re going to learn more about how we can use React Hooks to replace some of these patterns to increase state logic reuse.
  • Leonardo Maldonado
Introduction to React with the State & Effects hooks (sergiodxa.com)
Jun 15, 2019
Learn how to start a React project, create your first component and use the State and Effects hooks to implement basic behaviors.
  • Sergio Xalambrí
Build a Todo App in React Using Hooks (upmostly.com)
Jun 11, 2019
Build a simple todo app using React and React Hooks. This is a perfect starting tutorial for beginner and intermediate React developers.
  • James King
A state management pattern for Ionic React with React Hooks (ionicframework.com)
Jun 08, 2019
How to manage state in your app can often be the biggest and most impactful architectural decision you make.
  • Max Lynch
Create a Custom useFetch() React Hook (scotch.io)
Jun 05, 2019
The whole idea behind custom hooks is just so that we can extract component logic into reusable functions.
Build our own React-Redux using useReducer and useContext Hooks (blog.bitsrc.io)
Jun 05, 2019
We always use the react-redux library in our React apps whenever we decide to include state management in our React app.
  • Chidume Nnamdi
When to useMemo and useCallback (kentcdodds.com)
Jun 04, 2019
Performance optimizations ALWAYS come with a cost but do NOT always come with a benefit. Let's talk about the costs and benefits of useMemo and useCallback.
React useState with Callback (robinwieruch.de)
Jun 03, 2019
If you have started to use React’s useState hook for your application, you may be missing a callback function, because only the initial state can be passed to the hook.
Creating reusable abstractions with Amplify and React hooks (itnext.io)
Jun 02, 2019
This article will capitalise on this new trend and the concept of custom hooks, in order to draw a line between React & external services with regards to the ways they communicate with one another.
  • Aggelos Arvanitakis
How to useState in React? (robinwieruch.de)
May 30, 2019
This tutorial goes step by step through a useState example in React for getting you started with this React Hook for state management.
Hiding implementation details with React hooks (javascriptplayground.com)
May 28, 2019
Hooks are a great way to take some complex logic and hide it behind a nice facade. In this post we'll discuss the how, why and when of doing this.
Learn React Hooks By Building An Auth Based To Do App (hackernoon.com)
May 28, 2019
The aim of this post is to provide developers with an alternative to the the other guidelines that are out there. I wouldn’t say this approach is better, but if you’re like me and you prefer to delve into building a small app that demonstrates as well as explains what you’re learning, then this one is for you.
  • Luke Mwila
How to migrate from HOCs to Hooks (blog.logrocket.com)
May 28, 2019
This article is going to show you two techniques to deal with these situations — creating HOCs from your hooks, and creating hooks from your HOCs.
  • Kristofer Selbekk
Handling Authentication in React with Context and Hooks (auth0.com)
May 27, 2019
Learn how to handle identity management in React by creating a global state for your authentication details with Context and update these details with Hooks.
  • Roy Derks
Four patterns for global state with React hooks: Context or Redux (blog.axlight.com)
May 27, 2019
Global state or shared state is one of the biggest issues when you start developing a React app. Should we use Redux? Do hooks provide a Redux-like solution? I would like to show four patterns toward using Redux. This is my personal opinion and mainly for new apps.
  • Daishi Kato
Wrangling useReducer, from action creators to typings (adamrackis.dev)
May 24, 2019
useReducer is an outstanding construct for managing state in React applications; however, there can be situations in which passing around a dispatch function can be less convenient than a typical callback.
  • Adam Rackis
The Approachable Guide to useReducer (seangroff.com)
May 20, 2019
The useReducer hook provides a flexible solution to complex state. The useState hook we all know and love is actually built on top of useReducer.
  • Sean Groff
Authentication in React Applications (kentcdodds.com)
May 20, 2019
How to handle user authentication in modern React Applications with context and hooks.
How to Redux with React Hooks? (robinwieruch.de)
May 20, 2019
There are several React Hooks that make state management in React Components possible.
How To useContext With useReducer (hswolff.com)
May 19, 2019
Today we learn about useContext, and how it makes your usage of useReducer flexible for any size application.
  • Harry Wolff
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.
React Hooks - A deeper dive featuring useContext and useReducer (testdriven.io)
Apr 17, 2019
The main purpose of this article is to get an understanding of useContext and useReducer and how they can work together to make React applications and their state management clean and efficient.
  • Austin Johnston
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
Primer on React Hooks (testdriven.io)
Feb 27, 2019
React is great, but there are some slightly aggravating architecture principles that need to be addressed while developing larger applications.
  • Austin Johnston
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

Hook or not? - Create a custom React Hook ... or? (youtube.com)
May 18, 2021
I'll show how to create a custom React Infinity Scroll Hook. But is it really a hook? What is the difference between a regular function and a custom hook in React?
  • Thomas Weibenfalk
Custom React Local Storage Hook (youtube.com)
Nov 11, 2020
In this video we'll create a custom hook that will write our state to local storage, and initialize it based on what is in local storage. This can be used to remember what the user has placed into state, without needing to write it to some sort of backend in a database.
useEffect and useLayoutEffect (youtube.com)
Oct 26, 2020
In this video we'll learn you how and when to use useEffect and/or useLayoutEffect in React. We will also learn about side-effects.
  • Bruno Antunes
Guide to React's useRef Hook (youtube.com)
Aug 17, 2020
In this post you'll learn how and why you can use React's useRef Hook to persist values across renders without causing a re-render.
Writing a Custom React Hook with TypeScript (youtube.com)
Jun 29, 2020
Last part of my 3 part series on writing custom React Hooks! This one converts the Hook to use TypeScript!
  • Harry Wolff
Writing a Custom Hook: Conditional Hooks (youtube.com)
May 25, 2020
This is a continuation of my last video where we started writing our own custom React Hook, useEventListener.
  • Harry Wolff
Writing a Custom Hook: useEventListener (youtube.com)
May 18, 2020
React doesn't have a great way to create a global click handler, so we're going to be creating a custom Hook to fulfill our needs!
  • Harry Wolff
Local Storage | Custom React Hook with Typescript (youtube.com)
May 12, 2020
Create a custom and reusable React Hook for using Local Storage - useLocalStorage with Typescript in React. I'll show you, from scratch, how to use a custom hook in React to utilize localstorage for persisting data.
  • Thomas Weibenfalk
Code Review: useEffectReducer (youtube.com)
May 11, 2020
This first installment of "Code Review" we'll be taking a look at useEffectReducer.
  • Harry Wolff
Dark Mode w/ Custom React Hooks using Local Storage (youtube.com)
Apr 10, 2020
Creating a custom hook in React to store state in local storage, synchronize it across browser tabs, and have its value retrieved on page refresh. We will be looking at a form input as well as how you could use this technique to create a persistent Dark Mode on your website.
Instagram API with React Hooks + Gatsby (youtube.com)
Apr 01, 2020
I'm cold, and coding up some Gatsby, React and Instagram API.
React Hooks Coronavirus API Code Along (youtube.com)
Mar 12, 2020
Quick and dirty code along showing how to use React hooks to fetch and display data.
Using React Hooks to Style CSS Flexbox or Grid Rows (youtube.com)
Mar 06, 2020
In this video I write a hook that will allow me to target and style flex or grid items based on their row. Something that currently isn't possible with just CSS.
Build an Expense Tracker | React Hooks & Context API (youtube.com)
Feb 22, 2020
In this project we will take a vanilla JS expense tracker app and turn it into a React app using hooks (useState, useContext, useReducer) and the context API.
Refactoring React + Apollo Form to use Hooks (youtube.com)
Dec 17, 2019
Quickie on me refactoring React Apollo from Render.
React Data Fetching with Hooks using SWR (youtube.com)
Dec 16, 2019
We will show how to use SWR, how to configure it globally, and a pattern I like to use which separates data fetching from data display.
Using React Hooks, Context and State (youtube.com)
Dec 13, 2019
Little code along of me trying to figure out how to use local state with context and hooks.
A Guided Tour of React Hooks (youtube.com)
Nov 19, 2019
In this talk you'll learn about the "magic" behind how Hooks work and get to see a few examples of them in action. We'll cover the big four: useState, useEffect, useReducer, and useContext, plus how to write your very own custom hooks.
React Hooks Project Tutorial - Game of Life (youtube.com)
Nov 14, 2019
Learn how to build Conway's Game of Life using React hooks in this project tutorial.
First Look at React useDeferredValue Hook (youtube.com)
Nov 01, 2019
Learn how to use the useDeferredValue hook in React.
First Look at React useTransition Hook (youtube.com)
Oct 30, 2019
Learn how to use the useTransition hook in React.
Refactoring off the hook(s) (youtube.com)
Oct 03, 2019
This talk will walk you through the refactoring of an existing React app with hooks: we will go through the theory as well as seeing the available hooks in a real world scenario.
  • Marco Cedaro
Async React Hooks (youtube.com)
Sep 23, 2019
Today's episode we're getting deep into how to write Async React Hooks! We're going to use a fun real world example for this video - searching for gifs on Giphy.com!
  • Harry Wolff
React Hooks: useContext (youtube.com)
Sep 18, 2019
Let's see how to combine useReducer and useContext to create a powerful pattern that allows us to encapsulate complicated nested state, and provide simple state values and action functions to any children of our Context Provider.
React Hooks: useReducer (youtube.com)
Sep 16, 2019
I know reducers from Redux, but something similar actually comes built in to React now with the useReducer hook. We'll see how to use it to clean up nested state.
How I built a useField React Hook for forms... and why form-related hooks are so hard! (youtube.com)
Sep 13, 2019
In this stream, I'll walk you through how I built a useField hook using nothing but React Hooks. I'll also talk about why I think form state is so hard to handle in any UI and my plans to make it easier.
  • Tanner Linsley
Advanced change detection in React with the useEffect hook (youtube.com)
Sep 10, 2019
The useEffect hooks is a great way to detect changes to state and sync side-effects. We'll look at some corner cases and escape hatches that will level up your useEffect game.
  • Tanner Linsley
How to debounce async side-effects with React Hooks (youtube.com)
Sep 03, 2019
Debouncing async side-effects is a mouthful, but you'll probably run into sooner or later with your React apps. Join me as we build a few hooks to handle this use case!
  • Tanner Linsley
How to build a simple plugin system for custom React hooks (youtube.com)
Aug 16, 2019
Custom hooks in React are so easy to build it's silly not to. In this cast I'll show you how I took custom react hooks to the next level by letting other devs extend my custom react hooks with just a little work.
  • Tanner Linsley
Why React Hooks? (youtube.com)
Jul 29, 2019
When React Hooks were released, React was the most popular and most loved front-end framework in the JavaScript ecosystem. In this post, you'll learn why, despite existing praise, the React team dedicated so many resources to creating and releasing Hooks. Along the way, you'll also get a soft introduction to the main aspects of the Hooks API.
Let's Build a React Native App: Migrating to React Hooks (youtube.com)
Jul 29, 2019
If you've ever been curious what it's like to convert a Component to React Hooks then this is the video for you! I convert 4 components LIVE with you!
  • Harry Wolff
React Tutorial: Zero to Sixty (Using Hooks) (youtube.com)
Jul 26, 2019
In this tutorial, we learn about React and its feature, and how to use them to create state of the art web applications.
  • Ahmed Hadjou
React Hooks - Crash Course Tutorial (youtube.com)
Jul 17, 2019
Learn about React Hooks and Styled Components in this full tutorial. We'll build a React video player where you can create a list of videos and select from the list. The video player can play both Vimeo and YouTube videos and will also persist state in local storage of played videos.
  • Thomas Weibenfalk
Testing React Hooks (youtube.com)
Jul 15, 2019
You may be wondering, "How do I test React Hooks?" The short answer is: Just like normal React Components! Yay!
  • Harry Wolff
React refactoring, off the hook(s)! (youtube.com)
Jul 10, 2019
React Hooks are going to change the way we write React components and apps. Let's explore together a real world refactoring of an app with hooks, introducing the concept and exploring how the mental model of components has to evolve breaking the dichotomy of stateful class vs stateless "functional" components.
  • Marco Cedaro
State Management in a World of Hooks (youtube.com)
Jul 03, 2019
In this talk we will explore how we can use the benefits of hooks in state management, such as separation of concerns, declarative side effects, and simple code reuse.
  • Adam Klein
  • Maayan Glikser
React Hooks Course (youtube.com)
Jul 02, 2019
My entire React Hooks series in one video, it covers: useState, useEffect, useRef, useLayoutEffect, useCallback, useMemo, useReducer, and useContext.
Getting Closure on React Hooks (youtube.com)
Jul 01, 2019
In this talk, we’ll reintroduce closures by building a tiny clone of React! 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.
React Hooks useContext Tutorial (Storing a User) (youtube.com)
Jun 29, 2019
Learn how to use the useContext hook in React to store and access a user.
State Machines Meet React Hooks (youtube.com)
Jun 28, 2019
Surprised of too many things went wrong in your UI components? Ever felt that freeing your components from bugs is a never-ending endeavour? Familiar with this kind of code in React? Join Zains journey in solving those kinds of issues using State Machines and see how they go in action with React Hooks.
  • Zain Fathoni
React Hooks useMemo Tutorial (youtube.com)
Jun 27, 2019
Learn how to use the useMemo hook in React.
React Hooks useCallback Tutorial (youtube.com)
Jun 26, 2019
Learn how to use the useCallback hook in React.
React Hooks useLayoutEffect Tutorial (youtube.com)
Jun 25, 2019
Learn how to use the useLayoutEffect hook in React.
React Hooks useRef Tutorial (youtube.com)
Jun 24, 2019
Learn how to use the useRef hook in React.
Simple Frontend Pagination | React (youtube.com)
Jun 23, 2019
In this video we will implement some custom pagination in React to get a certain number of fetched posts per page. We will be using the useState and useEffect hooks as well.
React Hooks useEffect Tutorial (youtube.com)
Jun 23, 2019
Learn how to use the useEffect hook in React.
React Hooks useState Tutorial (youtube.com)
Jun 22, 2019
Beginner React Hooks tutorial on useState.
Write Custom Hooks to Clean Up Your Code (daveceddia.com)
Jun 18, 2019
React hooks make it easy to add a single piece of state to a component. But it’s also a breeze to write your very own custom hooks, just by moving the hooks-related code into a function.
Memoizing Tic Tac Toe in React with useReducer (youtube.com)
Jun 09, 2019
Learn how to refactor some React tic tac toe code with useReducer so it's easy to memoize.
Intro to React Hooks (youtube.com)
May 28, 2019
A hands-on tutorial on how to create a simple functional React component using React Hooks.
React Hooks Closure Problems (youtube.com)
May 21, 2019
I go over an issue you may face when using React hooks that has to do with closures.
How to useContext with useReducer (youtube.com)
May 20, 2019
Today we're learning about how to useContext with useReducer! A super powerful combination of features that let you create extremely flexible components.
  • Harry Wolff
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

Learn React Hooks (packtpub.com)
Oct 18, 2019
Create large-scale web applications with code that is extensible and easy to understand using React Hooks.
  • Daniel Bugl
The Guide to Learning React Hooks (telerik.com)
Aug 26, 2019
Learn all about React Hooks with this hands-on guide. Includes tutorials and code examples on using hooks for state and effects, for context and for reducers (Redux), plus creating custom React hooks.
  • Eric Bishard
Pure React (daveceddia.com)
Aug 25, 2019
Learn vanilla React, without all the libraries. A hands-on, learn-by-doing intro to React for beginners.
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

Epic React (epicreact.dev)
Sep 29, 2020
Confidently ship well-architected production ready React apps like a pro.
useEffect Over Lunch (useeffectoverlunch.com)
Sep 18, 2020
Get confident with useEffect in under an hour.
The Road to React: The one with Hooks (educative.io)
Apr 21, 2020
In this course you will take a deep dive into React fundamentals, covering all new React concepts including Hooks. I do address some legacy features in case you’re working with an older codebase, but the majority of this course will focus on working with modern React. You will learn how to style your app, techniques for maintaining your app, and some more advanced concepts like performance optimization.
Shareable Custom Hooks in React (egghead.io)
Oct 29, 2019
In this self-paced workshop, you'll work through refactoring a component to use a custom hook, and learn to apply the patterns used by the React team to your own code.
  • Joe Previte
React Basics (ultimatecourses.com)
Sep 19, 2019
Take a dive into the React world, complete with the brand new Hooks API. Learn how to “think” in components, dataflow and master JSX to build React applications the modern way.
  • Almero Steyn
Next-Level React Apps With Hooks (code.tutsplus.com)
Sep 17, 2019
In this course, Derek Jensen will take you through the process of creating a brand new guest book app, from scratch, using React. As you follow along, you'll code your entire app with functional components, and in the process you'll learn not just what hooks are, but also how and when to use them.
  • Derek Jensen
React Hooks (tylermcginnis.com)
Jul 23, 2019
The marketing pitch for Hooks is that they allow you to add state and other React features to function components. In reality, they're much more than that. In this course you'll start by learning the mental model behind Hooks. Once you've got that you'll learn each Hook individually followed by a practical, real-world problem set to work through.
Complete React Developer in 2019 (w/ Redux, Hooks, GraphQL) (udemy.com)
Jul 01, 2019
Become a Senior React Developer! Build a massive E-commerce app with Redux, Hooks, GraphQL, ContextAPI, Stripe, Firebase.
  • Andrei Neagoie
  • Yihua Zhang
Intermediate React, v2 (frontendmasters.com)
Jun 11, 2019
Learn to build scalable React applications using the latest tools and techniques available in the React ecosystem! This is a modular course where you can pick and choose the various pieces of the react ecosystem you want to learn.
Complete Intro to React, v5 (frontendmasters.com)
Jun 04, 2019
Learn to build real-world applications using modern React! Much more than an intro, you’ll start from the ground up, getting all the way to using the latest features in React, including hooks, effects, context, and portals.
React Front To Back 2019 (udemy.com)
Jun 04, 2019
Lean Modern React 16.8+ Including Hooks, Context API, Full Stack MERN & Redux By Building Real Life Projects.
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

Realigning Your Model of React After Hooks (kentcdodds.com)
Aug 08, 2019
Dan Abramov discusses how the addition of hooks changed how we write React.
React Hooks for Global State and More Custom Hooks with Daishi Kato (devchat.tv)
Jul 30, 2019
Daishi talks about his definition of global state, how it differs from a regular state, and why it is a problem with the current context implementation.
useEffect The Good, the Bad, and the Gotchas (devchat.tv)
Jun 11, 2019
The panel starts by discussing if useEffect is a good API or a bad API. The problems that useEffect solves are considered. The panel agrees it is a much better abstraction where subscriptions are concerned. Suspense and data fetching is discussed, the panel considers what the react team has in store concerning data fetching.
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".
Syntax Live React Edition (syntax.fm)
Apr 10, 2019
It's another live episode of Syntax in which Wes and Scott do Hook'd on Hooks, Who's Snackin' on React, Stump'd, Unpopular Opinions, Q & Eh, and more!
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.21.11
Aug 08, 2019
React hook form validation without the hassle.
    react-hanger (github.com)1011
    v2.1.0
    Jul 16, 2019
    A small collection of useful hooks.
    • Kitze
    retoggle (github.com)1211
    v0.4.0
    Jun 10, 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