Share
Explore

Using React Hooks and useEffect() for a Pokemon Battle with Ash, Misty, and Brock


11. Hooks – Reusability, Readability, and a Different Mental Model

Overview
This chapter will introduce you to React Hooks, enabling you to avoid wrapping your components in classes just to gain access to the state of a component. Using fewer abstractions will make the components lighter and will enhance the readability of the code. You will be able to optimize code while using Hooks in components efficiently. You will be able to create abstractions with Hooks that can be reused and so we do not need to rely on class-based components or component life cycle methods.

Introduction

In the previous chapters, we have seen how React handles state in class components. By the end of 2018, however, React developers had come up with a completely new API called Hooks, which changes how we manipulate the state of a component. This brings in massive syntax changes within the React framework. Even more importantly, this new method of state management can be used to manipulate state of the functional components.
Nothing in the life of a React component has a more significant effect than Hooks, which, of course, begs the question: what problems do Hooks solve that the former APIs could not? Previously, if we wanted to declare a state, we had to create a whole class and all the boilerplate code for that. Hooks, on the other hand, enable you to declare the state of a component with just one line. Hooks make React code more readable, maintainable, and reusable, while also making it a lot easier for newcomers to understand.
The Hooks library has been built with a newer version of ECMAScript; a script used to package JavaScript code for reuse. In this chapter, we will first take a look at the functionalities of Hooks. Later on in this chapter, we will look at the old style of writing code using class-based components and render props in React components and compare this method directly with Hooks and see how Hooks can improve the code you write.
Let's get started to see how you, as a developer, can benefit from embracing hooks.

Hooks

In this section, we are going to introduce two of the popularly used React hooks: useState and useEffect. These are widely used and can solve most of our problems. The useState hook is used to initialize the state of a component and get access to a function that allows you to modify the state of that same component. The useEffect hook, on the other hand, is used when changes are made to the component, similar to the use case for componentDidMount or componentDidUpdate methods in class-based components.
Note
There are other types of hooks that come bundled with the React library. You can find a complete list of these at .
Let's dive right into these two particular hooks in more detail.

useState

useState is the first type of hook that we are going to use. It gives us all the functionality that this.state and this.setState provide for class-based components. When we call useState, it will return an array where the first item in the array is the initial state of the component (which is what we pass in React.useState), and the second item is a function that acts identically as setState in a class-based component.
We can declare useState as following:
const [state, setState] = React.useState({ someFlag: false });
// or like this
const result = React.useState({ someFlag: false });
const state = result[0];
const setState = result[1];
Copy
The square brackets might seem intimidating, but they are exactly like object destructuring in JavaScript, except here we use arrays.
Note
Look at JavaScript de-structuring here: .
We have also discussed object de-structuring in Chapter 7, Communication between Components.
The first element of the arrays is the state itself, while the second element is a function that updates the state and, of course, triggers a re-render. We call this the setter function.
It can have two signatures; we can also say that the setter function can be overloaded. We will discuss the overloading of the setter function in more detail in Chapter 12, State Management with Hooks.
In this case, we will use the following code:
setState({ someNewState: true });
setState(prevState => ({ someNewState: !prevState.someNewState }));
Copy
The first example just takes a new state. For the second, you pass in a function with the previous state as the argument, and that function must return the new state. This is useful when our new state depends on the previous state. We will see the implementation shortly.
This behaves exactly like this.setState in class components. Now, let's work through a hands-on exercise to rend
er an image using the useState hook.

Exercise 11.01: Displaying an Image with the Toggle Button

In this exercise, we will display an image in a functional component. We will use an <img/> tag to render an image. Image tags require at least the source properties src and alt for accessibility. We will create a base component, and this will be provided to <Base/> and passed down as props later. To do so, let's go through the following steps:
Start by creating a new React project, which we will call imagehook, start the project, and take a look at the browser window that should have opened for you automatically:
$ npx create-react-app imagehook
$ cd imagehook
$ yarn start
Copy
Delete src/logo.svg. We won't be using this file, so we don't need to include it.
Replace the contents of src/App.css with the following:
img {
width: 200px;
}
body {
margin: 20px;
}
button {
width: 200px;
height: 50px;
background: #4444ff;
color: white;
font-weight: bold;
border: none;
cursor: pointer;
}
Copy
You'll want to find an image to display in our component. For example, we could grab a nice picture of coffee beans from Unsplash, like the image we will use in this example: .
(Photo by Nadia Valko on Unsplash: https://unsplash.com/s/photos/coffee-beans?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Replace the contents of the App component with the functional component below. This will set up our base UI, which we will refine through hooks later:
import React from "react";
import "./App.css";
const App = () => {
const url = "https://images.unsplash.com/photo-1562051036-e0eea191d42f";
return (
<div className="App">
<img src={url} alt="Some coffee beans" />
<br />
<button>Toggle Image Display</button>
</div>
);
};
export default App;
Copy
This should give us our starting component UI, matching the following screenshot:
Figure 11.1: Toggle button
Figure 11.1: Toggle button
Let's expand this functional component a little more by making the image display toggleable and dependent on a displayImage Boolean value.
First, add the displayImage Boolean with a default value, false, and then change the JSX containing the <img> tag to be conditionally rendered when displayImage is true:
const App = () => {
const url = "https://images.unsplash.com/photo-1562051036-e0eea191d42f";
const displayImage = false;
return (
<div className="App">
{displayImage && <img src={url} alt="Some coffee beans" />}
<br />
<button>Toggle Image Display</button>
</div>
);
};
Copy
We are now ready to start adding React Hooks to this component. We will add a new line to the component that calls React.useState, pass in an initial value, false, and de-structure the result of that call into two new variables: displayImage and setState.
Use the following code
const [displayImage, setState] = React.useState(false);
Copy
Note that we are not using setState yet; we will be doing that soon. When your browser refreshes, you should no longer see the image on your component.
Next, we will need to implement a function that will toggle the displayImage flag via our setState function:
const toggleImage = () => setState(!displayImage);
Copy
Finally, hook it up by adding the toggleImage call to the button's onClick handler:
<button onClick={toggleImage}>Toggle Image Display</button>
Copy
Our final component code in src/App.js should now be the following:
App.js
1 import React from "react";
2 import "./App.css";
3
4 const App = () => {
5 const url = "https://images.unsplash.com/photo-1562051036-e0eea191d42f";
6 const [displayImage, setState] = React.useState(false);
7 const toggleImage = () => setState(!displayImage);
8 return (
Copy
The complete code can be found at: .
The output is as follows:
Figure 11.2: Final output of the Toggle button
Figure 11.2: Final output of the Toggle button
Now, what would previously have been a complex abstraction has been reduced to only a function call. We don't need a complex constructor, multiple additional state modifying functions, or any other additional logic. It is close to our view layer; the order reads from top to bottom, which makes it super readable. Our JSX remained the same and no more wrappers got injected into the React tree. Similar to how we moved state modification away from class components, let's now see how we can move away from life cycle methods used in class components and use the useEffect hook instead.

useEffect – from Life Cycle Methods to Effect Hooks

Hooks not only encompass new syntax in React but also require a different design pattern when it comes to developing the functional components in a React application. During the development cycle of a React application, components are continuously created, modified, and destroyed. Developers might want to use these events to call an API to modify the DOM elements, or maybe keep a log of information to display in the console.
As we've discussed previously, class components have life cycle methods to do this. If we wanted to do something like modifying the DOM or fetch some data by initiating a network request, we would use the life cycle methods, componentDidMount, componentDidUpdate, or componentWillUnmount. These life cycle events are tied to the insertion, updating, and removal of a given component. If you want to attach an event listener to a button in a form component, you could do that in componentDidMount. If you eventually need to remove it, you will use the componentWillUnmount method.
Other frameworks, such as Vue.js or Angular, have the concept of using life cycle methods as event callbacks. They provide callbacks to create a way to respond to events such as mouse clicks or mouse scrolls. However, with Hooks, there is a massive fundamental shift in the usual mental model. Instead of putting the code separately in each life cycle method, we group our logic and put it together into a functional hook called Effects.
Let's look at an example. We will create a class component, Comp, within which we will display our name prop when the component updates on mount. We will do this by implementing the life cycle methods, componentDidUpate and componentDidMount, as mentioned in Chapter 4, React Lifecycle Methods, as follows:
class Comp extends React.Component {
componentDidMount(){
console.log(this.props.name);
}
componentDidUpdate(prevProps){
if(prevProps.name !== this.props.name) {
console.log(this.props.name);
}
}
render() {
return <div>{this.props.name}</div>;
}
}
Copy
If we want to capture similar functionality in a functional component as provided by these life cycle methods in a class component, we will need to use the useEffect hook. With the useEffect hook, we are going to take a different approach in terms of syntax. We will rewrite the Comp component, where we will create the logic first and will control when to run it like the following code:
const Comp = props => {
React.useEffect(() => {
console.log("name prop changed");
}, [props.name]);
return <div>{props.name}</div>;
}
Copy
As you can see from the preceding code, the useEffect hook takes two arguments:
the first is the function that will be used to handle the effect.
the other argument is an array of variables which will be used to determine whether we should call the function we passed in as the first argument.
In the preceding example, we have a React Effect we want to use, but we only want it to be executed when the name attribute in props gets updated, so we pass in [props.name] as our second argument. This effect (the first callback argument) will rerun only if the name prop changes. The logic is now encapsulated.
In a useEffect hook, the first argument is always a function where we put what we want to do (what we would have put into our life cycles for class-based components), and the second is an array of values. In that array, we set out our conditions when to perform effects. We don't need to rely on updates, mounts, and removals; we can create our own conditions. We can add multiple values to that array, which means that React will run that effect any time any of these values change. We can also leave this empty; in that case, the effect only runs on mount. We can also omit that array entirely in which case it will run every time the component re-renders.
The biggest difference between life cycle methods and useEffect is that with life cycle methods, you must think about which event is the right event to listen to and implement the correct logic for each. With useEffect, we think about the logic first and then control when to run it.
This has a few implications in terms of the readability of our code. For one, life cycle methods can be cluttered. If we have multiple things to do (such as logging the output and a network request), they will live inside the same function; they cannot be extracted.
In the following code, we are creating a class component, Comp, where we will perform multiple different actions when the component updates; the name prop will be displayed in the console and a network request will be initiated:
class Comp extends React.Component {
componentDidMount(){
console.log(this.props.name)
}
componentDidUpdate(prevProps){
// this is one piece of logic
if(prevProps.name !== this.props.name) {
console.log(this.props.name);
}
// this is another
fetch('https://jsonplaceholder.typicode.com/todos/1');
}
}
Copy
In the preceding example, the fetch method used to initiate a network request has no connection with the console.log function, yet it still lives inside the same componentDidUpdate life cycle method in a class-based component.
useEffect focuses on the logic and allows you to couple logic with specific properties or attributes. This allows us to create one effect for the console and a different one for a network request, and we can control when they are called. This provides a cleaner and more elegant approach to writing different effects for different use cases.
Using useEffect hooks, we would rewrite the Comp component to look more like this:
const Comp = props => {
React.useEffect(() => {
console.log("name prop changed");
}, [props.name]);
React.useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/todos/1');
}, [props.name]);
return <div>{props.name}</div>;
}
Copy
He
re, there are two separate hooks for the two different actions where the logic remains encapsulated. Our code is cleaner and the logic for each property is clear and easy to follow. Using this knowledge, let's build a component using useEffect.

Exercise 11.02: Creating a Login State Using useEffect

In this exercise, we will utilize useEffect to create a component where we simulate logging in (and remaining logged in even if we refresh the page) through a combination of hooks and localStorage.
Note
localStorage is a part of the HTML5 specifications. With the help of localStorage, we can write values to our browser that will be persistent across re-renders. This constitutes unique persistent storage for our domain. If you would like to know more about localStorage, you can visit MDN for more information: ).
For this exercise, it is recommended to have Chrome developer panels open on the Application page. For that, you only need to right-click on your web page, click on inspect, and, on the tabs starting with elements, find Application -> Storage -> Local Storage:
Begin by creating a new React project, which we will call login-storage, start the project, and take a look at the browser window that should have opened for you automatically:
$ npx create-react-app login-storage
$ cd login-storage
$ yarn start
Copy
Delete src/logo.svg.
Replace the contents of src/App.css with the following:
body {
margin: 20px;
}
button {
width: 200px;
height: 50px;
background: #4444ff;
color: white;
font-weight: bold;
border: none;
cursor: pointer;
}
Copy
We will begin by creating the base UI without any of the logic attached to it yet. This will help us to understand how the UI will function later. Right now, the UI will just have a block of text telling us whether we are logged in or not and a button to log in/log out:
import React from "react";
import "./App.css";
const App = () => {
return (
<div className="App">
<p>Logged Out</p>
<button>Log In</button>
</div>
);
};
export default App;
Copy
Our early UI should resemble the following screenshot:
Figure 11.3: Component logged out
Figure 11.3: Component logged out
Now, we can incorporate the logic based on React Hooks.
Begin by using React.useState again to declare our initial state and store the results in loggedIn and setLoggedIn, respectively:
let [loggedIn, setLoggedIn] = React.useState(false);
Copy
Add some conditional logic to display Welcome Back if the user is logged in, or Logged Out if the user is logged out:
<p>{loggedIn ? "Welcome Back!" : "Logged Out"}</p>
Copy
Add a login condition to the button as well. There should be an onClick event handler that calls the setLoggedIn function and toggles the login state, while the text of the button should also be conditional based on whether the user is logged in:
<button onClick={() => setLoggedIn(!loggedIn)}>
{loggedIn ? "Log Out" : "Log In"}
</button>
Copy
Now, we need to save the logged-in state to localStorage. We will use the localStorage.setItem(key, value) function to set a string key in the browser's local storage. This will allow the value of loggedIn to persist even if the browser refreshes. We want to store the loggedIn variable to localStorage. That would look something like this:
localStorage.setItem("loggedIn", loggedIn);
Copy
Use the preceding code to write our useEffect hook, which we only want to trigger when the loggedIn value is changed:
React.useEffect(() => {
localStorage.setItem("loggedIn", loggedIn);
}, [loggedIn]);
Copy
The full component we have built so far should be the following:
import React from "react";
import "./App.css";
const App = () => {
let [loggedIn, setLoggedIn] = React.useState(false);
React.useEffect(() => {
localStorage.setItem("loggedIn", loggedIn);
}, [loggedIn]);
return (
<div className="App">
<p>{loggedIn ? "Welcome Back!" : "Logged Out"}</p>
<button onClick={() => setLoggedIn(!loggedIn)}>
{loggedIn ? "Log Out" : "Log In"}
</button>
</div>
);
};
export default App;
Copy
Next, use your browser's development tools to see what values are getting stored in localStorage and the output is as follows:
Figure 11.4: Opening browser development tools to see localStorage
Figure 11.4: Opening browser development tools to see localStorage
When the app starts or we refresh the page, our program is not picking up the value from localStorage. Let's apply the same logic we used before.
Apply the same logic we used before and we will grab the value from localStorage with the help of the getItem function. It takes one argument: the identifier (or key) of the value. We could get the value out using the following code:
const loggedInFromLocalStorage = localStorage.getItem("loggedIn");
if (JSON.parse(loggedInFromLocalStorage) === true) {
setLoggedIn(true);
}
Copy
This returns a string, so we need to use JSON.parse to parse it to a boolean. If that is true, we set the state to true as if we clicked on the Log-n button. Let's place this in our code in a useEffect hook. We want to run this code on mount, so it runs once, and automatically return the value in the console if it is true.
Specify an empty array as the values to watch on the useEffect call to have our hook only affect when our component is mounted:
React.useEffect(() => {
const loggedInFromLocalStorage = localStorage.getItem("loggedIn");
if (JSON.parse(loggedInFromLocalStorage) === true) {
setLoggedIn(true);
}
}, []);
Copy
The complete code for our component is as follows:
App.js
1 import React from "react";
2 import "./App.css";
3
4 const App = () => {
5 let [loggedIn, setLoggedIn] = React.useState(false);
6 React.useEffect(() => {
7 const loggedInFromLocalStorage = localStorage.getItem("loggedIn");
8
9 if (JSON.parse(loggedInFromLocalStorage) === true) {
10 setLoggedIn(true);
11 }
12 }, []);
Copy
The complete code can be found here: .
The output will be as follows:
Figure 11.5: Welcome message
Fig
ure 11.5: Welcome message
Even if we refresh our page, we are still logged in. Try it for yourself to verify whether it is working in the way you expect.

Comparing useEffect Hooks with Life Cycle Methods

After seeing how we can be more precise in our code using effects compared to life cycles, let's have a brief overview, through a diagram, to see how the life cycle methods in the class components work, as shown in the following:
Figure 11.6: Life cycle methods
Figure 11.6: Life cycle methods
In classes, you have life cycle methods that tap into some state of that component. The problem with that model is that you may actually need to break each event into multiple different unrelated functions. For example, say you want to attach an event listener and, to avoid memory leaks, you want to remove the listener when it is no longer needed. What you must do in a class-based component is to attach it in componentDidMount and remove it in componentWillUnmount. This means that, now, both of those life cycle methods must track and have access to that listener. Instead of our code being grouped by context, it is grouped by life cycle methods.
Let's now see how Effect Hooks work by means of a diagram:
Figure 11.7: UseEffect hook
Figure 11.7: UseEffect hook
It is different with hooks. If we have an event listener, we put it to one useEffect. In that useEffect hook, we manage everything related to that specific context, and no unrelated code will live in that effect. If we need to do something unrelated, we instead create a separate effect for that. In the preceding diagram, we have two logical units and they are put into two separate effect hooks. With life cycle methods, they might have shared the same life cycle or life cycle methods depending on when they were required.

Comparing Hooks to Render Props

Now that we know how to apply these hooks, let's take a quick look at why such a paradigm shift was required. The idea behind introducing hooks was mainly to improve developer experience. At React Conf 2018, the React team tried to address three main points:
Make smaller components where logic is easier to understand
Make components more reusable
Limit the use of class-based components as they are harder to optimize
After practicing some exercises on how to start using the useState and useEffect hooks with functional components, it might be a good idea to see how hooks actually simplify the design pattern.
To do so, let's take the final component of Exercise 11.01, Displaying an Image with the Toggle Button, which contains code where we built an app that loads and shows an image by pressing a button.
We had a component called <App/> that rendered an <img/> tag:
const App = () => {
const url = "https://images.unsplash.com/photo-1562051036-e0eea191d42f";
const [displayImage, setState] = React.useState(false);
const toggleImage = () => setState(!displayImage);
return (
<div className="App">
{displayImage && <img src={url} alt="Some coffee beans" />}
<br />
<button onClick={toggleImage}>Toggle Image Display</button>
</div>
);
};
Copy
We had a toggleImage function that hides the logic toggling the displayImage variable between true and false depending on whether you have a value inside it. We could further extract this out to its own function so that it is not bound to the <App /> component, and then we can throw it in any other functional component like so:
const useToggle = initialValue => {
const [value, setValue] = React.useState(initialValue);
const toggle = () => setValue(prevValue => !prevValue);
return [value, toggle];
};
Copy
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.