2.2.2: Hooks

Learning Objectives

1. React Hooks are a newer and more efficient syntax for React components

2. Know how to write components in Hooks syntax

Introduction

React Hooks are a newer and more efficient syntax for React Components. They allow us to write all components as functional components, and use so-called "Hook" functions to replace class component functionality such as state management and lifecycle methods. Components with hooks are functionally the same as class components.

Rocket recommends using Hooks in our exercises and projects from now on because Hooks are a cleaner syntax and the React team recommends using Hooks for new projects. The React team is re-writing the official React tutorials to use Hooks. React Router v6 (the latest and greatest version of React Router) that we are about to learn only supports React Hooks syntax natively, and Rocket recommends using Hooks to enable us to use the latest React Router features.

Introducing Hooks

Introducing Hooks – React

1. Many companies will still be using class components in their code. It will be important for us to still understand class components, but know how to write components with Hooks for new code to take advantage of latest React functionality.

Hooks at a Glance

This page is an overview of all of the subsequent tutorial pages. The subsequent pages go into more depth on each topic.

Hooks at a Glance – React

1. Note that from now on we will write only functional components and not class components. React Hooks provide all the functionality we needed from class components that we didn't previously have with functional components.

2. useState hook replaces this.state and this.setState with a new pair of variables for getting and setting a specific state value.

3. Note how the React team encourages us to use multiple useState Hooks in the same component for each type of state. There is no need to store all of a component's state in a single this.state object like we did previously.

4. Returning a cleanup function from useEffect is advanced functionality and we will not be using it as often at Rocket

5. We will not be writing custom Hooks at Rocket; feel free to skim through the "Building Your Own Hooks" section

6. We will learn about useContext and useReducer hooks in a later submodule.

Using the State Hook

We will use the useState Hook most often. Clear explanations of what the useState Hook is and how to use it.

Using the State Hook – React

1. Rocket strongly recommends following the naming convention of X and setX as the de-structured state variable names from useState. This makes our code more readable because other engineers will immediately know what each variable is for.

Sample useState Hook

React Hooks useState

Using the Effect Hook

At Rocket we will use useEffect to replace componentDidMount for setting up subscriptions such as Firebase listeners and for data fetching. useEffect also allows us to perform functionality that was previously provided by componentDidUpdate and componentWillUnmount, but we will use that functionality less often.

Using the Effect Hook – React

1. As the docs mention, we can think of useEffect as running after the component renders.

2. A memory leak is when data that we use in parts of our apps is not properly cleaned up after the app stops using those parts. This can cause our apps to run slowly and even crash if the "leaks" cause our computers to run out of memory while running our apps. This will rarely happen to use in practice because JavaScript has automatic memory management and our apps will not be the most complex for now.

3. Returning a cleanup function from useEffect is optional and we will not use it often at Rocket.

4. No need to worry too much about "Optimizing Performance by Skipping Effects"; we will rarely need this and we can come back to it once we're more familiar with using useEffect and Hooks in general.

Rules of Hooks

Rocket uses Create React App for our projects that includes the ESLint plugin for Hooks, so ESLint should enforce these rules for us by default.

Rules of Hooks – React

Sample useEffect Hook

React Hooks useEffect

Please checkout the finished code in this repository, ensure that you're on the react_hooks branch if you want to test out the application on your machine you will need to install the dependencies with the command npm install after the installation you can then run the application with the command npm start. See if you can alter a React application on your machine from class based components to functional components.

Post-Class Exercises: Codecademy React 101

Complete all exercises in the following Codecademy lessons when they are assigned in the Rocket course schedule.

1. Hooks

   1. Function Components

   2. The State Hook

   3. The Effect Hook

Additional Resources

The following resources are optional and can be used more for reference than upfront reading.

1. Build Your Own Hooks

2. Hooks API Reference

3. Hooks FAQ