Understanding the useEffect Hook in React

What Is useEffect?

The useEffect Hook in React lets you perform side effects in your functional components. Side effects are operations that occur in your component but don't directly involve rendering the UI. Examples of side effects include:

  • Fetching data from an API.
  • Setting up a timer.
  • Updating the document title.

Before Hooks, these tasks were handled in class components using lifecycle methods. With useEffect, you can manage side effects in functional components more easily and directly.

Why Do We Need useEffect?

Imagine you have a component that needs to fetch user data from an API when it first appears on the screen. In class components, you’d use the componentDidMount lifecycle method for this task. With functional components, useEffect provides a more straightforward way to perform this operation.

Basic Usage of useEffect

Here's a step-by-step example of using useEffect:

import React, { useState, useEffect } from 'react';

function SimpleEffectComponent() {
// 1. State to store a message
const [message, setMessage] = useState('Hello, world!');

// 2. useEffect to run code when the component mounts
useEffect(() => {
console.log('Component has mounted!');
}, []); // Empty array means this runs only once when the component mounts

return (
<div>
<h1>{message}</h1>
</div>
);
}

export default SimpleEffectComponent;

Breaking Down the Example

Importing useEffect

You need to import useEffect from the React library, along with useState.

 
import React, { useState, useEffect } from 'react';

Creating State

We use the useState Hook to create a state variable message with an initial value of 'Hello, world!'.

const [message, setMessage] = useState('Hello, world!');

message: This state variable stores the message to display.
setMessage: This function updates the state of message.

Using useEffect

The useEffect Hook lets us run code when the component mounts (i.e., when it appears on the screen).

useEffect(() => {
console.log('Component has mounted!');
}, []);

The first argument is a function containing the code to run. In this example, it logs 'Component has mounted!' to the console.
The second argument is an array of dependencies. An empty array [] means the effect runs only once after the component mounts, similar to componentDidMount in class components.

Rendering Output

The component displays the message state inside an <h1> tag.

return (
<div>
<h1>{message}</h1>
</div>
);

More Detailed Examples

Updating the Document Title

Here’s how to update the document title whenever the component mounts:

import React, { useEffect } from 'react';

function UpdateTitleComponent() {
useEffect(() => {
document.title = 'New Title';
}, []); // Runs only once when the component mounts

return (
<div>
<h1>Check the document title!</h1>
</div>
);
}

export default UpdateTitleComponent;

document.title: This changes the title of the browser tab. When the component mounts, the document title updates to 'New Title'.

Setting Up a Timer

You can use useEffect to set up a timer that performs an action at regular intervals:

import React, { useEffect } from 'react';

function TimerComponent() {
useEffect(() => {
const timer = setInterval(() => {
console.log('Tick');
}, 1000); // Runs every second

// Cleanup function
return () => clearInterval(timer);
}, []); // Runs only once when the component mounts

return (
<div>
<h1>Check the console for "Tick" messages!</h1>
</div>
);
}

export default TimerComponent;

setInterval: Sets up a timer that logs 'Tick' every second.
Cleanup function: The function returned from useEffect clears the timer when the component unmounts or before the effect runs again.

Key Points to Remember

  • useEffect Runs on Mount and Update: By default, useEffect runs after the component mounts. You can control its behavior using the dependencies array.
  • Dependencies Array:
    • An empty array [] means the effect runs only once after the component mounts.
    • If you include variables in the array, the effect will run whenever those variables change.
  • Cleanup Function: If your effect sets up something like a timer or subscription, provide a cleanup function to remove or clear those resources when the component unmounts.
    • useEffect(() => {
const timer = setInterval(() => {
console.log('Tick');
}, 1000);

return () => clearInterval(timer); // Cleanup function
}, []);
  • Multiple Effects: You can use useEffect multiple times in the same component to handle different side effects.
    • useEffect(() => {
// Effect for fetching data
}, []);

useEffect(() => {
// Effect for setting up a subscription
}, [subscriptionData]);

Conclusion

The useEffect Hook is a powerful tool for managing side effects in React functional components. It simplifies tasks like fetching data, updating the document title, and setting up timers. Understanding useEffect allows you to manage these operations effectively without needing class components.

In the next lesson, we’ll explore useContext, which helps you share and manage data across your React app more easily.