Mastering Side Effects in React with the useEffect Hook

In our previous article, we introduced the useEffect hook in React, highlighting its role in managing side effects within functional components. We mentioned that useEffect can replace three critical lifecycle methods - componentDidMount, componentDidUpdate, and componentWillUnmount. In this article, we'll delve into an example to see how you can harness the power of useEffect to mimic the behavior of componentDidMount and componentDidUpdate in functional components. Let's get started.

Transitioning from Class Components to Functional Components

For those who are well-versed in class components, let's start by examining what the code looks like in a class component before transitioning to a functional component. We'll create a simple counter component that updates the document title based on the counter's value.

class Counter extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    document.title = `Clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

In this class component, we initialize the counter, update the document title in componentDidMount, and increment the count when the button is clicked.

Functional Component with useEffect

Now, let's achieve the same functionality using a functional component. We'll create a simple counter using the useState hook and then use the useEffect hook to update the document title.

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

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

  useEffect(() => {
    document.title = `Clicked ${count} times`;
  }, [count]);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

In this functional component, we start by initializing the counter using the useState hook. Then, we use the useEffect hook, specifying a function to run when the component renders or updates. We pass [count] as the dependency array to ensure the effect only runs when the count variable changes.

Understanding How useEffect Works

useEffect works by executing the function provided within it after every render of the component. This means it runs after the initial render and every subsequent update. This behavior mirrors our intentions when using class components. We want to execute code on both the initial render and any subsequent updates.

Placing useEffect Inside the Component

One essential detail to note is that useEffect is placed directly within the component. This allows easy access to the component's state and props without writing additional code. By doing so, we can seamlessly work with the component's context.

In our example, useEffect enables us to update the document title after the initial render and every subsequent update, just as we did with class components. The power of useEffect lies in its flexibility and ability to cater to different use cases.

Wrapping Up

In this article, we've explored how to use the useEffect hook to handle side effects in a functional component. We've seen how it can replace the componentDidMount and componentDidUpdate lifecycle methods, simplifying your code and making it more efficient.

In the next article, we'll dive into another example to demonstrate the versatility of the useEffect hook. Thank you for watching, and if you find this content helpful, feel free to subscribe for more React tutorials. See you in the next one!