Understanding the useEffect() Hook in React

React introduced Hooks in version 16.8, and one of the most commonly used Hooks is useEffect(). The useEffect() Hook lets us perform side effects in function components, such as fetching data, updating the DOM, or setting up subscriptions.

How useEffect() Works
The useEffect() Hook accepts two arguments:

1. A function: This is the effect that will run. This function is executed after the component renders (or re-renders). You can think of this as the "side effect" logic.
2. An optional dependency array: This tells React when to re-run the effect. If you provide an empty array ([]), the effect will only run once, after the initial render.

Basic Syntax:

useEffect(() => {
  // Your side effect code here
}, [dependencies]);

Example 1: Fetching Data

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

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from an API
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((err) => setError("Error fetching data"));
  }, []);

  return (
    <div style="{{" maxwidth: margin: auto padding:>
      <h1 style="{{" textalign: marginbottom: color:>
        Users Data
      </h1>
      <h2 style="{{" textalign: marginbottom: color:>
        Understanding the useEffect() Hook in React By Sudhanshu Gaikwad
      </h2>

      {error ? (
        <p style="{{" color: textalign:>{error}</p>
      ) : (
        <table style="{{" width: bordercollapse: marginbottom:>
          <thead style="{{" backgroundcolor: color:>
            <tr>
              <th style="{{" padding: textalign:>ID</th>
              <th style="{{" padding: textalign:>Name</th>
              <th style="{{" padding: textalign:>Username</th>
              <th style="{{" padding: textalign:>Email</th>
            </tr>
          </thead>
          <tbody>
            {data.map((user) => (
              <tr key="{user.id}" style="{{" backgroundcolor: user.id : borderbottom: solid>
                <td style="{{" padding:>{user.id}</td>
                <td style="{{" padding:>{user.name}</td>
                <td style="{{" padding:>{user.username}</td>
                <td style="{{" padding:>{user.email}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

export default DataFetchingComponent;

Output

Example 2: Setting up a Timer

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

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div style="{{" display: justifycontent: alignitems: height: backgroundcolor:>
      <div style="{{" backgroundcolor: borderradius: padding: boxshadow: rgba textalign:>
        <h1 id="count-seconds">{count} seconds</h1>
        <p style="{{" margintop: fontsize: color:>Timer running with useEffect hook</p>
      </div>
    </div>
  );
}

export default TimerComponent;

Output

To summarize:

1. Use useEffect() for tasks like fetching data, manipulating the DOM, or setting up timers.
2. You can control when the effect runs by passing a dependency array.
3. Always clean up effects when necessary by returning a function from the useEffect()callback.

The above is the detailed content of Understanding the useEffect() Hook in React. For more information, please follow other related articles on the PHP Chinese website!