Comprendre le hook useEffect() dans React

React a introduit les Hooks dans la version 16.8, et l'un des Hooks les plus couramment utilisés est useEffect(). Le hook useEffect() nous permet d'effectuer des effets secondaires dans les composants de fonction, tels que la récupération de données, la mise à jour du DOM ou la configuration d'abonnements.

Comment fonctionne useEffect()
Le Hook useEffect() accepte deux arguments :

1. Une fonction : C'est l'effet qui va s'exécuter. Cette fonction est exécutée après le rendu (ou le nouveau rendu) du composant. Vous pouvez considérer cela comme la logique des « effets secondaires ».
2. Un tableau de dépendances facultatif : cela indique à React quand réexécuter l'effet. Si vous fournissez un tableau vide ([]), l'effet ne s'exécutera qu'une seule fois, après le rendu initial.

Syntaxe de base :

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

Exemple 1 : Récupération de données

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;

Sortie

Exemple 2 : Configuration d'une minuterie

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;

Sortie

Pour résumer :

1. Utilisez useEffect() pour des tâches telles que la récupération de données, la manipulation du DOM ou la configuration de minuteries.
2. Vous pouvez contrôler le moment où l'effet s'exécute en passant un tableau de dépendances.
3. Toujours nettoyer les effets lorsque cela est nécessaire en renvoyant une fonction à partir du rappel useEffect().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!