React 16.8 added a new feature called “hooks”. A hook is a function that you can call from within your React function components. (You can’t use hooks in class components)
Hooks can do lots of different things, from saving and maintaining local state to triggering side effects after a component renders to helping optimize your components. With hooks, function components can do almost everything that classes can.
You can also write your own custom hooks to combine logic into functions that you can reuse across multiple components – think persisting state to local storage when it changes, or reacting to the user gaining or losing their internet connection.
React Hooks Tutorials
Here are some articles to help you understand how each of the hooks works.
A Simple Intro to React Hooks will introduce you to hooks and show how to convert a simple React class component to use hooks.
4 Examples of the useState Hook will teach you about useState, the workhorse of the built-in hooks. It’s the one you’ll probably use most often. (there’s also a video).
useReducer Hook Examples will teach you about useReducer, which is like a more powerful form of useState. You might even be able to replace Redux for simple use cases (especially in combo with the useContext hook). This post also has a video.
How the useEffect Hook Works explains useEffect in detail. I think this is the most powerful and the most complex of all the built-in hooks. With it, you can replicate componentDidUpdate, componentDidMount, and other lifecycle methods. The biggest gotcha is the “dependency array,” which we cover in detail in the article.
The useEffect hook is probably the most complex of the set, and sometimes it takes some thinking to effectively control how often it runs. It’s also the best way to run code after a render finishes.
How the useContext Hook Works goes over the useContext hook, which, in contrast to useEffect, is one of the simplest hooks to use! It will help if you’re familiar with React’s Context API. Th useContext hook makes it simple to access a context value without having to wrap your component in a Consumer.
In Write Custom Hooks to Clean Up Your Code, we talk about why “custom hooks” are so awesome and create a couple reusable custom hooks of our own for things like showing/hiding modal dialogs. We’ll demystify the magic around the name “custom hooks” too.
In useEffect vs useLayoutEffect we’ll cover these two similarly-named hooks. Most of the time, you want the plain old useEffect, but sometimes useLayoutEffect is the better choice. We’ll talk about situations where you should use one over the other.
Full Talk: Guided Tour of React Hooks
At React Boston 2019 I gave a talk on hooks covering the Big Four (useState, useEffect, useContext, useReducer) and even a few of the more advanced hooks (useMemo, useCallback). You can watch the full talk right here. It’s about 35 minutes and will get you up to speed quickly with lots of example code.
