React hooks can be used to add state to functional components, as well as replace the lifecycle methods that only class methods had available until now.

This playlist goes through several different hooks available now in React, as well as how to make your own custom hooks!

React Hooks can replace local state in React components, so that you can write entire components as functions now, instead of classes.

In this lesson, we'll convert a React class component to a functional component, by switching from using local state to using the `useState` hook from React.

Rewrite a React Component Class to use the useState Hook Instead of Local State

Custom hooks in React are functions, and we can write them by combining other, preexisting hooks.

In this lesson, we'll wrap the `useState` React hook to create a hook that automatically pulls out the `event.target.value` of an input's `onChange` callback.  We'll then use that hook directly as the `onChange` prop of a text input.

Create a Custom Hook in React by Wrapping useState

There are two important rules to follow when writing React functional components with hooks.

1. Use the hooks at the top level of your functions, without wrapping them in `if` statements, loops, or other types of control logic.

2. Only call hooks from React functions or custom hooks that start with the word `use` - so that you and other developers know that those functions are hooks, and can use them appropriately.

In this lesson, we'll show examples of what to do and NOT do with hooks, by adding on to a simple React app that uses a custom hook.

Use React Hooks Correctly by Following The Two Rules of Hooks

If you want to make an AJAX call when a React component class component loads, then you can do that in the componentDidMount lifecycle method.  However, there is no lifecycle methods in React functional components.  Instead, you can use the `useEffect` hook!

In this lesson, we'll use the `useEffect` hook to fetch some JSON from an API when our React component loads.  We'll also avoid an infinite loop by passing an empty array of dependencies to the hook, and use the 2nd form of the `useState` hook inside of `useEffect`, which takes a callback to get the current value of the `useState` state.

Use the useEffect React Hook Instead of the componentDidMount Lifecycle Method

React hooks provide a new way to access the data and functions stored in context with the `useContext` hook.

In this lesson, we'll create a login form and store the user data in a context called `UserContext` that we create the typical way - with `React.createContext()`.  We'll also provide that context to our app the typical way - by wrapping our app with `<UserContext.Provider>`.

But then, in our child components, we'll use `useContext` to pull out the value stored in the `UserContext`.  Then, we can display that value, and use the function that we set in the context to change the user value.

Pass Data Between React Components with the useContext Hook

Instead of multiple `useState` hooks, you can use a single `useReducer` hook to manage multiple pieces of data in a React component.

This will feel very similar to Redux, but it will be defined for only a single component.

This can trade off some of the complexity of using multiple `useState` hooks, but it just moves that complexity into the reducer function - so using `useReducer` vs multiple `useState` calls is mostly just a code style choice.

Use a Reducer in a Functional Component with the useReducer Hook in React

If you have a React component that is computing a value that is expensive to compute, then you can cache that value with the `useMemo` hook, so that it's only re-computed when one of its dependencies change.

In this lesson, we'll use `useMemo` to memoize (cache) a label that is computed when the user presses a button - but we'll prevent it from being computed when the user updates other parts of the state (an input text value in this case).

Cache Computed Values for Better Performance with the useMemo React Hook

Most of the time you don't need access to the actual DOM when developing React applications.  But when you do need to, there's a hook that will give you access to the DOM.

In this lesson, we'll use the `useRef` hook to get a reference to a `div` element.  Then we'll print the dimensions of that element - just to show that we have access to the actual DOM element; but you can use this element now to do anything you'd typically do with an element.

The one trick to using the `useRef` hook is to remember to call `.current` on the reference to get the actual element.

React Hooks in Function Components

Instructor

Course content (8 lessons)

Instructor