Using React Hooks
Hooks are a feature that lets you use state and other React features without writing a class. More info
Articles & Tutorials
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
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
Apr 02, 2021
You can use custom React hooks to solve many different real-world problems in your React projects.
- Reed Barger
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
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
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
Mar 10, 2021
In this article I want to explain everything you need to know about the useEffect React hook.
- Felix Gerschau
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
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
Feb 19, 2021
How do you write a reusable React hook? Oh that's easy, every hook is reusable!
Swizec TellerJan 22, 2021
How to make a custom hook that wraps useState with TypeScript properly.
Kent C. DoddsJan 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
Jan 15, 2021
In this article, we’ll look at five useful React Hooks libraries and compare their utility.
- John Au-Yeung
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.
Robin WieruchDec 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.
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
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
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
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
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
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
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.
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
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.
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
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.
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
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.
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.
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
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
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
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
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
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
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
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.
May 13, 2020
React Hooks are a complete and better replacement for Classes. Will React Classes stay with us much longer?
- Fernando Doglio
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
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
May 04, 2020
Using Hooks to replace componentDidMount, componentWillUnmount, componentWillReceiveProps, componentDidUpdate.
- John Au-Yeung
Apr 28, 2020
Making network requests, memoizing, and handling errors using React hooks.
- Chidume Nnamdi
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
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
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
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
Mar 26, 2020
Top 11 recommended ReactJS custom Hooks — with examples.
- Chidume Nnamdi
Mar 24, 2020
Get confidence your custom React hooks work properly with solid tests.
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
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
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
Mar 05, 2020
When deciding between hooks, render props and higher-order components, always go with hooks wherever possible.
- Lucas Chen
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
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
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
Dec 31, 2019
How to use the useState hook to create a functional container component.
- Sonny Recio
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.
Leigh HallidayDec 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
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
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
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
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
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
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
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
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
Nov 23, 2019
React Hooks for axios, with built-in support for server-side rendering.
- Riccardo Giorato
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
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
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
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
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
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
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.
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
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
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
Sep 30, 2019
In this tutorial, we will go over how to build a complete front end app with routing and authentication.
- Mohammad Iqbal
Sep 24, 2019
A quick React Custom Hooks tutorial — with examples!
- Shubham Zanwar
Sep 20, 2019
There are two React hooks, useEffect and useLayoutEffect, that appear to work pretty much the same.
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
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.
Eve PorcelloSep 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
Sep 11, 2019
An article providing concrete examples of why and how one uses most of the React Hooks.
- John Tucker
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
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.
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
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
Sep 08, 2019
Making Use of Async Generators
- Daishi Kato
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
Aug 31, 2019
A fun exercise to help understand the differences and use cases of these two related hooks.
Aug 29, 2019
An alternative to some goodness of this.setState()
- Aditya Loshali
Aug 25, 2019
Learn about effects – a declarative approach to interacting with the world outside your app. With live demos, interactive exercises, and fractals.
James K NelsonAug 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
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
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
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.
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
Aug 08, 2019
In this article, we look at implementing a carousel that tries to simplify the entanglement by using React Hooks.
- Florian Rappl
Aug 06, 2019
Today we’re thrilled to announce the addition of React Hooks to Apollo Client!
- Hugh Willson
Aug 05, 2019
Let's explore some hook gotchas and how to avoid them.
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
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ć
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
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?
Tyler McGinnisJul 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
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
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
Jul 24, 2019
What Are Hooks? They’re functions that give you React features like state and lifecycle hooks without ES6 classes.
- Yazeed Bzadough
Jul 23, 2019
Find out what the useReducer React hook is useful for, and how to work with it!
Flavio CopesJul 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
Jul 20, 2019
Find out what the useMemo React hook is useful for, and how to work with it!
Jul 19, 2019
Find out what the useEffect React hook is useful for, and how to work with it!
Jul 18, 2019
Find out what the useCallback React hook is useful for, and how to work with it!
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
Jul 17, 2019
Find out what the useState React hook is useful for, and how to work with it!
Jul 15, 2019
We’re going to see how hooks make our development process easier and faster by building a chat application.
- Akash Joshi
Jul 10, 2019
Some observations on the tradeoffs involved in using React hooks.
- Mark Erikson
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
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
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
Jun 29, 2019
This is a beginner tutorial in understanding React Hooks and the Context API.
- Ola John Ajiboye
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
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
Jun 20, 2019
A short post today about an easy tactic to avoid your useEffect calls becoming recursive when setting state.
Jack FranklinJun 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
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
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
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í
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
Jun 08, 2019
How to manage state in your app can often be the biggest and most impactful architectural decision you make.
- Max Lynch
Jun 05, 2019
The whole idea behind custom hooks is just so that we can extract component logic into reusable functions.
Christian NwambaJun 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
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.
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.
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
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.
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.
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
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
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
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
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
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
May 20, 2019
How to handle user authentication in modern React Applications with context and hooks.
May 20, 2019
There are several React Hooks that make state management in React Components possible.
May 19, 2019
Today we learn about useContext, and how it makes your usage of useReducer flexible for any size application.
- Harry Wolff
May 15, 2019
A guide to local and global state management via useState.
- Austin Malerba
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
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.
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
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
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
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
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
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
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
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
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.
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.
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
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.
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.
Apr 15, 2019
React Suspense is to a Monad as Hooks are to Applicative Notation
- Vitaliy Akimov
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
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
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).
Apr 08, 2019
An Illustrated Guide on React Hooks.
- Ohans Emmanuel
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.
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
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.
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.
Mar 25, 2019
A pattern for you to use in custom hooks to enhance the power and flexibility of your hooks.
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
Mar 19, 2019
useState is a hook that allows you to have state variables in functional components.
- Esteban Herrera
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
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
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
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
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.
Shawn WangMar 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.
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
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.
Ryan FlorenceMar 06, 2019
Custom hooks are like mixins: they're a great way to share stateful and side-effectful functionality between components.
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
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
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.
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
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
Feb 25, 2019
Learn to create a simple React/Redux integration using Hooks, then improve the performance using JavaScript Proxies.
- Daishi Kato
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
Feb 22, 2019
Even old-school class components allow you to compose component state. Hooks just make your life far, far simpler.
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
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.
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
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
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
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
Feb 18, 2019
GraphQL meets React Hooks and forms a powerful friendship. They should connect with MobX too!
- Daniel K.
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.
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.
Feb 18, 2019
Time to take a step further into hooks and learn useReducer, useRef, useContext, and useMemo.
- Aayush Jaiswal
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
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
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
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
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
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?"
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
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
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
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.
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
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.
Siddharth KshetrapalFeb 07, 2019
React Hooks have finally landed! So many emotions. Here’s a small selection of my own in chronological order
- Matt Perry
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
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
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.
Feb 06, 2019
With React 16.8, React Hooks are available in a stable release!
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
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
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.
Jan 30, 2019
Learn how and why to make a useTimeTravel React hook that we can use to make Tolerant User Interfaces.
Jan 28, 2019
Learn what's new with React Hooks. For example, use state in a functional component.
- Sarah Jorgenson
Jan 18, 2019
Hooks make it possible to organize logic in components, making them tiny and reusable without writing a class.
- Kingsley Silas
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
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
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
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
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
Jan 07, 2019
Everything you need to know to start working with Hooks in React.
- Chidume Nnamdi
Jan 05, 2019
A simple example of how we can use Mobx (a truly awesome state management library) with React Hooks
- Ryan Dsouza
Dec 31, 2018
In this article, I explain about the implementation of useAsyncTask.
- Daishi Kato
Dec 24, 2018
Hooks change everything, let's explore some fun patterns!
Dec 24, 2018
How can we prepare our tests for React’s new hooks feature?
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
Dec 17, 2018
A festive introduction to Hooks, and what you can do with them!
- Markus Rauhut
Dec 07, 2018
To show you the value of hooks, I first have to show you how my workshops usually go.
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
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
Dec 03, 2018
Since the announcement of experimental Hooks in React 16.7, they have taken the React community by storm.
- Charles Stover
Nov 29, 2018
Besides stateful function components, this new feature allow us to build a custom hook to share logic between components.
- Daishi Kato
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
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.
Nov 19, 2018
Real world examples of how to convert React classes to React functional components using React 16.7 Hooks.
- Peter Ekene
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
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
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
Nov 13, 2018
Building a React App without Classes and using React 16.7 Hooks.
- Sarah Jorgenson
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
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.
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
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
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
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
Oct 31, 2018
Untangling the rules around the proposal using diagrams
- Rudi Yardley
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.
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.
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.
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
Oct 28, 2018
Learn how React's new Hooks feature works, and how Hooks can make your code cleaner and easier to write.
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
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
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.
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
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.
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
May 25, 2020
This is a continuation of my last video where we started writing our own custom React Hook, useEventListener.
- Harry Wolff
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
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
May 11, 2020
This first installment of "Code Review" we'll be taking a look at useEffectReducer.
- Harry Wolff
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.
Apr 01, 2020
I'm cold, and coding up some Gatsby, React and Instagram API.
Wes BosMar 12, 2020
Quick and dirty code along showing how to use React hooks to fetch and display data.
Scott TolinskiMar 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.
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.
Brad TraversyDec 17, 2019
Quickie on me refactoring React Apollo from Render.
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.
Dec 13, 2019
Little code along of me trying to figure out how to use local state with context and hooks.
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.
Nov 14, 2019
Learn how to build Conway's Game of Life using React hooks in this project tutorial.
Ben Awad- Ben Awad
Nov 01, 2019
Learn how to use the useDeferredValue hook in React.
Oct 30, 2019
Learn how to use the useTransition hook in React.
Oct 08, 2019
- Jamon Holmgren
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
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
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.
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.
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
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
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
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
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.
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
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
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
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
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
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
Jul 02, 2019
My entire React Hooks series in one video, it covers: useState, useEffect, useRef, useLayoutEffect, useCallback, useMemo, useReducer, and useContext.
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.
Michael JacksonJun 29, 2019
Learn how to use the useContext hook in React to store and access a user.
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
Jun 26, 2019
Learn how to use the useCallback hook in React.
Jun 25, 2019
Learn how to use the useLayoutEffect hook in React.
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.
Jun 23, 2019
Learn how to use the useEffect hook in React.
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.
Jun 09, 2019
Learn how to refactor some React tic tac toe code with useReducer so it's easy to memoize.
May 28, 2019
A hands-on tutorial on how to create a simple functional React component using React Hooks.
- Kathryn Middleton
Facebook
May 24, 2019
- Mattias Petter Johansson
- Jared Forsyth
May 21, 2019
I go over an issue you may face when using React hooks that has to do with closures.
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
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
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
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
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
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
Apr 04, 2019
Dan Abramov- Mattias Petter Johansson
Mar 20, 2019
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).
Feb 21, 2019
The React Context API can replace Redux - with React Hooks, it gets even more fun to use.
Maximilian SchwarzmüllerFeb 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.
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.
Feb 16, 2019
Learn how to setup React Native to work with React Hooks.
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
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?
Feb 06, 2019
Going to be exploring a bunch of stuff about React hooks which was released today!
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.
Jan 22, 2019
Honestly we're basically just going to play with the example in the docs.
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.
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.
Ken Wheeler- Aaron Cordova
Dec 10, 2018
Let's just make a quick little useLocalStorage hook
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.
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
Nov 26, 2018
Going to be refactoring react-toggled to export a new fancy useToggle hook.
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.
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.
Nov 12, 2018
React Hooks is an exciting new (experimental) feature in the world of React.
- Harry Wolff
Nov 05, 2018
React Hooks is an exciting new (experimental) feature in the world of React.
- Harry Wolff
Nov 05, 2018
I'm trying to figure out the best way to simplify testing of React components with react-testing-library.
Nov 01, 2018
Learn how to use the React Context API with function components. Using the useContext React Hook.
Oct 31, 2018
Learn how to simplify your reducers with Immer and integrate it with React Hooks.
Oct 30, 2018
I'm planning on using both React Hooks and Class Components.
Oct 29, 2018
React Hooks are not slower than Class Components.
Oct 29, 2018
React Hooks is an exciting new (experimental) feature in the world of React.
- Harry Wolff
Oct 28, 2018
Learn how to fetch data from an API using React Hooks useEffect.
Sophie AlpertOct 27, 2018
A walkthrough of building a Todo List with React Hooks. Specifically, useState.
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.
Books & Guides
Oct 18, 2019
Create large-scale web applications with code that is extensible and easy to understand using React Hooks.
- Daniel Bugl
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
Aug 25, 2019
Learn vanilla React, without all the libraries. A hands-on, learn-by-doing intro to React for beginners.
May 02, 2019
Modern React with Every React Update Since v16 Demystified (includes advanced hooks)
- Ohans Emmanuel
Apr 14, 2019
React hooks cheatsheet with live editable examples.
- Ohans Emmanuel
Courses & Video Series
Sep 29, 2020
Confidently ship well-architected production ready React apps like a pro.
Sep 18, 2020
Get confident with useEffect in under an hour.
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.
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
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
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
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.
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
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.
Brian HoltJun 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.
Jun 04, 2019
Lean Modern React 16.8+ Including Hooks, Context API, Full Stack MERN & Redux By Building Real Life Projects.
Mar 15, 2019
The best way to learn a new tech is to build something with it. So, let's build a freaking game!
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.
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.
Elijah ManorDec 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
Aug 08, 2019
Dan Abramov discusses how the addition of hooks changed how we write React.
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.
Dave Ceddia- Thomas Aylott
- Lucas Reis
- Daishi Kato
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.
- Dave Ceddia
- Lucas Reis
- Thomas Aylott
- Justin Bennett
May 07, 2019
The panel discusses Conlin’s article "Link Lists in the Wild: React Hooks".
Nader Dabit- Dave Ceddia
- Justin Bennett
- Lucas Reis
- Charles Max Wood
- Thomas Aylott
- Conlin Durbin
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!
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
Jan 23, 2019
- Dave Ceddia
- Justin Bennett
- Lucas Reis
- Charles Max Wood
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.
Michael ChanNov 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.
Jared PalmerNov 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.
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.
Sebastian Markbåge
Andrew Clark
Brian VaughnLibraries
v3.21.11
Aug 08, 2019
React hook form validation without the hassle.
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
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