Understanding the useEffect() Hook in React-JS Tutorial-php.cn

Understanding the useEffect() Hook in React

DDD

Release： 2024-10-05 12:17:02

Original

1137 people have browsed it

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:

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.
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]);

Copy after login

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: "1200px", margin: "0 auto", padding: "20px" }}>
      <h1 style={{ textAlign: "center", marginBottom: "20px", color: "#333" }}>
        Users Data
      </h1>
      <h2 style={{ textAlign: "center", marginBottom: "20px", color: "#333" }}>
        Understanding the useEffect() Hook in React By Sudhanshu Gaikwad
      </h2>

      {error ? (
        <p style={{ color: "red", textAlign: "center" }}>{error}</p>
      ) : (
        <table
          style={{
            width: "100%",
            borderCollapse: "collapse",
            marginBottom: "20px",
          }}
        >
          <thead style={{ backgroundColor: "black", color: "white" }}>
            <tr>
              <th style={{ padding: "10px", textAlign: "left" }}>ID</th>
              <th style={{ padding: "10px", textAlign: "left" }}>Name</th>
              <th style={{ padding: "10px", textAlign: "left" }}>Username</th>
              <th style={{ padding: "10px", textAlign: "left" }}>Email</th>
            </tr>
          </thead>
          <tbody>
            {data.map((user) => (
              <tr
                key={user.id}
                style={{
                  backgroundColor: user.id % 2 === 0 ? "#f2f2f2" : "white",
                  borderBottom: "1px solid #ddd",
                }}
              >
                <td style={{ padding: "10px" }}>{user.id}</td>
                <td style={{ padding: "10px" }}>{user.name}</td>
                <td style={{ padding: "10px" }}>{user.username}</td>
                <td style={{ padding: "10px" }}>{user.email}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

export default DataFetchingComponent;

Copy after login

Output

Understanding the useEffect() Hook in React

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: "flex", justifyContent: "center", alignItems: "center", height: "100vh", backgroundColor: "#f0f4f8" }}>
      <div style={{ backgroundColor: "#fff", borderRadius: "10px", padding: "30px 50px", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)", textAlign: "center" }}>
        <h1 style={{ fontSize: "3rem", fontFamily: "Roboto, sans-serif", color: "#333", margin: "0" }}>{count} seconds</h1>
        <p style={{ marginTop: "15px", fontSize: "1.2rem", color: "#666" }}>Timer running with useEffect hook</p>
      </div>
    </div>
  );
}

export default TimerComponent;

Copy after login

Output

Understanding the useEffect() Hook in React

To summarize:

Use useEffect() for tasks like fetching data, manipulating the DOM, or setting up timers.
You can control when the effect runs by passing a dependency array.
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!