A Beginner's Guide to React UseEffect Hook and Custom Hooks Creation
Zuko Obi
React Hooks are special functions that allow you to “hook into” React features without the need to create classes. These provide an alternative to writing class-based components (as hooks do not function inside classes).
Operations like data fetching or manually changing the DOM via React components can cause side effects or “effects” as they are known. This can affect other components within your application.
React comes with in-built hooks like useEffect that allow you to perform side effects from a function or component. With a single effect function, we can achieve the purposes of the React classes including componentDidMount, componentWillUnmount and componentDidUpdate.
Key takeaways
By the end of this tutorial, the reader will be able to understand:
What React hooks are and their benefits.
The functionalities of
useEffect.Rules for using
useEffect.How to consume APIs with
useEffectand process responses.How to use
useEffectto “clean up” effects (or “after effects” as I call them) by returning a function.
Prerequisites
For an efficient understanding of this tutorial, it is recommended that you have:
React v16 or newer installed on your machine.
A working understanding of Javascript.
Basic knowledge of ReactJS.
A suitable text editor of your choice.
What are React hooks?
React Hooks are the best thing to happen to React devs in a long time. It makes it possible for functional programmers to create dynamic projects without having to write classes as class based components require a render() method, has complex UI logic and are generally more complex to manage.
You create a hook depending on its utility.
What is the React UseEffect?
The useEffect hook has superpowers that enable us to design our custom hooks. When a change occurs, it allows us to perform side effects in functional components. It allows data retrieval, DOM modification, and function execution each time a component renders.
Let's explore some examples:
import React, { useState, useEffect } from "react";
import "./Counter.css";
export const Counter = () => {
const [count, setCount] = useState(0);
// useEffect hook used to log and display number of times counter is updated
useEffect(() => {
console.log("counter ran once");
}, []);
return (
<div className="modal">
<div className="modal__counter">
{/* subtraction button to reduce the value of counter */}
<div
className="modal__counter--decrease"
onClick={() => setCount(count - 1)}
>
-
</div>
{/* counter value is displayed */}
<div className="modal__counter--reset">{count}</div>
{/* addition button to increase the value of counter */}
<div
className="modal__counter--increase"
onClick={() => setCount(count + 1)}
>
+
</div>
</div>
</div>
);
};
The above code is a simple counter that allows the user to increase and decrease a value. Let's add some styling to it with the code below:
.modal__counter {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #dbdada;
border-radius: 5px;
width: 100%;
max-width: 100px;
margin-top: 0.5rem;
overflow: hidden;
}
.modal__counter--increase,
.modal__counter--decrease {
background-color: #f2f2f2;
padding: 0 0.7rem;
cursor: pointer;
}
.modal__counter--reset {
padding: 0 0.5rem;
cursor: pointer;
}
.modal-body__date,
.modal-body__time {
font-weight: 400;
padding-top: 2rem;
}
We used the useState hook to update the counter variable in the React code above.
Each time we intend to change the value of count, we trigger the useEffect function. This keeps track of any changes made to the component. In this example, the initial loading of the page triggers the useEffect function.
This is the output of the preceding code.
The output above shows the value of counter. The initial render of the component causes the function to run.
Let's modify the code by altering the array dependence, which is currently empty, and then reflect the current status of counter.
import React, { useState, useEffect } from "react";
import "./Counter.css";
export const Counter = () => {
const [count, setCount] = useState(0);
// useEffect hook used to log and display number of times counter is updated
useEffect(() => {
console.log("counter ran once");
}, [count]); // current status of count is used to update component
return (
<div className="modal">
<div className="modal__counter">
{/* subtraction button to reduce the value of counter */}
<div
className="modal__counter--decrease"
onClick={() => setCount(count - 1)}
>
-
</div>
{/* counter value is displayed */}
<div className="modal__counter--reset">{count}</div>
{/* addition button to increase the value of counter */}
<div
className="modal__counter--increase"
onClick={() => setCount(count + 1)}
>
+
</div>
</div>
</div>
);
};
Next, we increment the value of counter three times so that whenever a user clicks the increment or decrement button, the useEffect function runs and sends a result to the console. This informs us that there has been a change in our counter variable. This continues for as long as a change occurs on the variable.
The counter starts counting when the page loads for the first time. It was increased three times, resulting in a total of four runs.
Rules for using useEffect
We use the useEffect hook to run functionalities during the component's lifetime rather than specific user interactions or DOM events.
For example, you might wish to get a list of users as soon as the page loads. The names of the people change as the component mounts without user interaction.
It is recommended that you use useEffect for asynchronous operations. This helps to avoid unwanted errors that could cause your UI to become unusable.
How to consume APIs with useEffect and process responses
Now that we have some understanding of the useEffect, let's fetch some data with an API. We'll use the JSON placeholder free API, a standard API for working with dummy data.
import React, { useEffect, useState } from "react";
import axios from "axios";
export const Users = () => {
const [names, setNames] = useState([]);
// We make an asynchronous API call using the useEffect hook
useEffect(() => {
const getAllUsers = async () => {
// The actual API call is made within the try block
try {
// A GET request is sent to retrieve “users”
const res = await axios.get("https://jsonplaceholder.typicode.com/users");
// We set names using the data from the response of the API call
setNames(res.data);
} catch (err) {
console.log(err);
}
};
getAllUsers(); // component unmounts
}, []);
// List of users are then displayed
return (
<div>
<h1><b>List of Users</b></h1>
<br />
{names.map((name) => (
<div key={name.username}>
<h2>{name.name}</h2>
<br />
<hr />
</div>
))}
</div>
);
};
In the above example, we used useState and useEffect, two different hooks.
We used the useState variable to regulate the API response, and the useEffect was employed for data retrieval.
We used the try-catch function to regulate whether the obtained request succeeded or failed.
We imported axios, which was used to make a get request to the API. We received the result, and passed it to the setState to map across the available users list.
This is the result of the above-mentioned request.
Before we conclude, let's take a look at the final key point.
How to use useEffect to “clean up” effects
Below is a typical error that necessitates the employment of a cleanup function within a useEffect:
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. |
Let's add a cleanup method to our application.
import React, { useEffect, useState } from "react";
import axios from "axios";
export const Users = () => {
const [names, setNames] = useState([]);
// We make an asynchronous API call using the useEffect hook
useEffect(() => {
const getAllUsers = async () => {
// The actual API call is made within the try block
try {
// A GET request is sent to retrieve “users”
const res = await axios.get("https://jsonplaceholder.typicode.com/users");
// We set names using the data from the response of the API call
setNames(res.data);
} catch (err) {
console.log(err);
}
};
getAllUsers();
// component unmounts
// clean up function is added
return () => {
console.log('I am inside a cleanup function');
};
}, []);
// List of users are then displayed
return (
<div>
<h1><b>List of Users</b></h1>
<br />
{names.map((name) => (
<div key={name.username}>
<h2>{name.name}</h2>
<br />
<hr />
</div>
))}
</div>
);
};
In the code above, the cleanup function runs after the second change in the useEffect function. We use the cleanup to abort asynchronous actions, usually after a component updates or unmounts on the second render.
How to create a custom hook
We can construct logic that can be reused across our applications by creating our own custom hooks. It generates a lot of reusable features.
To begin, let’s create a hooks folder within our src directory and a CounterHook.jsx file within the hooks folder.
Add the code below to the CounterHook.jsx file.
import { useState } from "react";
export const useCounter = () => {
const [counter, setCounter] = useState(0);
const increment = () => setCounter(counter + 1);
const decrement = () => setCounter(counter - 1);
return { counter, increment, decrement };
};
We're using useState to create the same logic we used in our first counter app, but this time, the logic is in a reusable function.
Next, let’s add this function to our counter application.
import React from "react";
import "./Counter.css";
import { useCounter } from "../../hooks/CounterHook";
export const Counter = () => {
const { counter, increment, decrement } = useCounter();
return (
<div className="modal">
<div className="modal__counter">
<div className="modal__counter--decrease" onClick={decrement}>
-
</div>
<div className="modal__counter--reset">{counter}</div>
<div className="modal__counter--increase" onClick={increment}>
+
</div>
</div>
</div>
);
};
Our application isn’t broken; in fact, it is in perfect working order. The custom hook we created improves the efficiency of our application.
Depending on the context of your application, creating custom hooks should be dependent on personal preferences.
Conclusion
We have learned what hooks are, how they work and their benefits. We have also demonstrated how useEffect can manage side effects from components. Lastly, we’ve been able to create a custom reusable hook with simple logic.
With the React useEffect hook, you can manage component lifecycle seamlessly without necessarily having to convert your functional based components into class based components.
References:
Subscribe to my newsletter
Read articles from Zuko Obi directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by