Using useEffect in React

With the introduction of hooks in React 16.8, developers gained a more elegant way to manage state and side effects in functional components. One such hook is useEffect, which allows us to perform side effects in a React component. In this article, we will dive into the details of useEffect and see how it can be effectively utilized.

Understanding useEffect

The useEffect hook is a powerful tool that enables us to perform side effects in our functional components. Side effects refer to operations that affect things outside the scope of the component, such as data fetching, subscriptions, or manually changing the DOM. The useEffect hook helps us handle these side effects by providing a clean and declarative way to specify what should happen after the component renders or when certain dependencies change.

Basic Usage

To use useEffect, we need to import it from the 'react' package:

Copycopy code to clipboard
1import React, { useEffect } from 'react';

The basic syntax of useEffect is as follows:

Copycopy code to clipboard
1useEffect(() => {
2  // Side effect logic goes here
3}, dependencies);

The first argument to useEffect is a callback function that contains the side effect logic. This function will be executed after the component has rendered. The second argument (optional) is an array of dependencies that determines when the side effect should re-run.

Running Effects Once

By default, the useEffect hook runs the side effect after every render. However, there are cases where we only want to run the effect once, when the component mounts. To achieve this, we can pass an empty array as the second argument:

Copycopy code to clipboard
1useEffect(() => {
2  // Run once on mount
3}, []);

This way, the effect will be executed only when the component is initially rendered.

Cleaning Up Effects

Sometimes, a side effect may require cleanup, especially when it involves subscriptions or event listeners. The useEffect hook allows us to return a cleanup function from the effect:

Copycopy code to clipboard
1useEffect(() => {
2  // Side effect logic goes here
3
4  return () => {
5    // Cleanup logic goes here
6  };
7}, dependencies);

The cleanup function will be executed before the component unmounts or before the effect is re-run. This is useful for releasing resources or canceling any pending operations.

Example: Fetching Data

One common use case of useEffect is fetching data from an API. Let's consider an example where we want to fetch a list of users from a server:

Copycopy code to clipboard
1import React, { useState, useEffect } from 'react';
2
3const UserList = () => {
4  const [users, setUsers] = useState([]);
5
6  useEffect(() => {
7    const fetchUsers = async () => {
8      const response = await fetch('https://api.example.com/users');
9      const data = await response.json();
10      setUsers(data);
11    };
12
13    fetchUsers();
14  }, []);
15
16  return (
17    <ul>
18      {users.map(user => (
19        <li key={user.id}>{user.name}</li>
20      ))}
21    </ul>
22  );
23};
24
25export default UserList;

In this example, we initialize the users state with an empty array. Inside the useEffect hook, we define an asynchronous function fetchUsers that performs the API call to retrieve the user data. We call this function when the component mounts by specifying an empty dependency array. Once the data is fetched, we update the users state with the received data, triggering a re-render of the component.

Wrapping Up

So we explored the useEffect hook in React and learned how to use it to handle side effects in functional components. We saw the basic usage of useEffect, how to run effects once, and how to clean up effects. We also implemented an example where we used useEffect to fetch data from an API and update the component's state accordingly. By understanding and effectively using useEffect, you can write cleaner and more maintainable React code - give it a try!