useEffect Hook Explained

Posted Dec 24, 2022

useEffect Hook Explained

The useEffect hook is a powerful tool in React that allows developers to perform side effects in their functional components.

  • This hook is a replacement for lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount.
import React, { Component } from "react";

class MyComponent extends Component {
  componentWillUnmount() {
    // Perform any operations that need to be done
    // before the component is unmounted

  componentDidMount() {
    // Perform any operations that need to be done
    // after the component has been rendered

  componentDidUpdate(prevProps, prevState) {
    // Perform any operations that need to be done
    // after the component has updated

  render() {
    return <div>My component has been rendered!</div>;
  • It enables developers to manage complex scenarios that were previously difficult or impossible to implement without using class-based components.

Before we dive into the details of how useEffect works and how to use it, it's important to understand the motivation behind this hook. In React, functional components are preferred over class-based components because they are easier to reason about, and they make it easier to create reusable, composable, and testable components.

However, functional components have a major limitation:

  • They only allow the developer to specify what the component should render, but not when it should be rendered.

This limitation is not an issue for simple components that only render static content, but it becomes a problem for components that need to fetch data from an API, perform an animation, or listen for events.

To address this limitation, React introduced the useEffect hook.

  • This hook allows the developer to specify a function that should be called after the component has rendered.

  • This function is called a "side effect" because it has an impact on the component or the application outside of the render cycle.

  • The useEffect hook provides a declarative way to specify these side effects, and it ensures that they are properly cleaned up when the component is unmounted or when the dependencies of the effect change.

Now that we have a high-level understanding of the useEffect hook, let's take a closer look at how it works. The useEffect hook takes two arguments: a callback function and an optional array of dependencies. The callback function is the side effect that should be executed after the component has rendered. The dependencies are values that the effect depends on. If the dependencies change, the effect will be re-executed. If the dependencies are not specified, the effect will be executed only once, after the initial render.

Here is a simple example of how to use the useEffect hook:

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

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;

  return (
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>

In this example, we have a functional component that uses the useState hook to keep track of the number of times the user has clicked a button. We use the useEffect hook to update the document title whenever the count state changes. Notice that we don't specify any dependencies for the effect, so it will be executed only once, after the initial render.

  • The useEffect hook provides a convenient way to perform side effects in functional components, but it also introduces some challenges.

  • The first challenge is understanding when the effect will be executed. As we saw in the previous example, the effect will be executed after the initial render, but it will also be executed whenever the dependencies of the effect change.

  • This behavior is similar to componentDidUpdate in class-based components, but it can be confusing for developers who are not familiar with the concept of dependencies.

In conclusion, the useEffect hook offers a number of benefits over the lifecycle methods when it comes to managing side effects in functional components. It allows for multiple side effects to be handled in a single component, provides greater control over when effects are executed, and supports asynchronous operations. For these reasons, the useEffect hook is a powerful tool for managing side effects in React applications.

Further Resources

Understanding the Importance of componentDidMount in Functional Component

In this article, we will explore the concept of componentdidmount in React and how it can be implemented in various scenarios, including functional components, hooks, and next.js. We will also discuss componentdidmount example, async componentdidmount, and its equivalent in react hooks.

Read Here →

Understanding useCallback Hook in React: Best Practices and Examples

Want to optimize your React app's performance? Learn all about useCallback, including examples, errors, and best practices, in our playful and engaging guide!

Read Here →

CRUD operation in React Js using Hooks, JSON file without APIs

In this tutorial, we will walk you through a simple CRUD (Create, Read, Update, Delete) application in ReactJS using hooks and a JSON file. You will learn how to perform CRUD operations on JSON data and create a Football Player Management System. This react js crud example with a JSON file will use functional components and hooks, and demonstrate how to query JSON data.

Read Here →

Presentational and Container Components in React Redux: Which One to Use When?

This article covers the basics of React Redux and component architecture, as well as the differences between presentational and container components. It also discusses best practices for building and testing both types of components and provides examples of each.

Read Here →

Vite vs Create-React-App: A Comprehensive Comparison and Migration Guide

This article provides a detailed comparison between Vite and Create-React-App, highlighting the benefits of using Vite for React development. It also serves as a migration guide for developers looking to switch from Create-React-App to Vite. The article covers key features and differences between the two tools and provides step-by-step instructions for setting up a React project with Vite and migrating an existing project from Create-React-App to Vite.

Read Here →