The useEffect Hook - Work with external side effects
19 January, 2023
7
7
0
Contributors
Introduction to the useEffect hook
The useEffect hook in React is a way to perform side effects such as data fetching, subscriptions, or manual DOM mutations in a functional component. It is called after a component is mounted and can also be used to clean up after a component is unmounted. This allows developers to use side effects without writing a class component.
Example for the useEffect hook
Here's an example of using the useEffect hook to make a network request and update the component's state with the response:
import { useState, useEffect } from 'react';
function Example() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchData() {
const response = await fetch('https://my-api.com/endpoint');
const data = await response.json();
setData(data);
setLoading(false);
}
fetchData();
}, []);
if (loading) {
return <p>Loading...</p>;
}
return <div>{data.name}</div>;
}In this example, we are using the useState hook to create two state variables: data and loading. The data variable will hold the response from the API, and the loading variable will be true while the request is being made and false when the response is received.
Then, we call the useEffect hook and pass it a function that makes the network request. This function will be run after the component is rendered. We pass an empty array as the second argument to useEffect, which tells it to only run the effect once (when the component mounts).
Inside the useEffect function, we use the async/await syntax to make the network request and wait for the response. When the response is received, we update the data and loading state variables using the setData and setLoading functions.
Finally, we use an if statement to render a loading message while the request is being made, and the data.name value when the response is received.
Main function of useEffect hook
This is just one example of how you can use the useEffect hook. You can use it to perform a wide variety of side effects, such as setting up event listeners, subscribing to observables, and more. Basically, anything that deals with something external to the React component, we prefer to do it inside the useEffect hook.
In many ways, the job of the useEffect hook is similar to the componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods in class-based components.
useEffect takes two arguments: a callback function that contains the side-effect code, and a dependencies array. The callback function is run after the component has rendered, and the dependencies array is used to determine when the effect should be re-run.
Thus, It provides us with the functionality of executing an effect once, at the first render by passing an empty array for the dependencies.
Or else, we can perform the effect multiple times whenever any of the dependency changes by including it as a part of the dependencies array.
Also, we can return a function from inside of the useEffect hook. This will act as a cleanup function and will be invoked by React whenever the component is unmounted.