Hiểu rõ về Hook useEffect() trong React

Trong React, useEffect() là một Hook mạnh mẽ được sử dụng để thực hiện các hiệu ứng phụ trong các component chức năng. Các hiệu ứng phụ này có thể bao gồm việc lấy dữ liệu từ API, cập nhật DOM hoặc thiết lập timer. Bạn có thể hình dung nó như một cầu nối giữa component React của bạn và thế giới bên ngoài.

useEffect() nhận vào hai tham số: một hàm chứa logic hiệu ứng phụ và một mảng dependency tùy chọn. Hàm này sẽ được thực thi sau mỗi lần component render hoặc re-render.

Mảng dependency đóng vai trò như một người giám sát, cho phép bạn kiểm soát khi nào hiệu ứng phụ được chạy lại. Nếu bạn cung cấp một mảng rỗng ([]), hiệu ứng phụ sẽ chỉ chạy một lần duy nhất, sau lần render ban đầu.

Để hiểu rõ hơn về cách thức hoạt động của useEffect(), hãy cùng xem qua một số ví dụ thực tế. Giả sử bạn muốn tạo một component lấy dữ liệu người dùng từ một API.

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;

Trong ví dụ này, chúng ta sử dụng useEffect() để thực hiện một yêu cầu fetch đến API và cập nhật state data với dữ liệu nhận được. Do mảng dependency là rỗng, nên việc lấy dữ liệu chỉ diễn ra một lần duy nhất sau khi component được mount.

Một ví dụ khác là tạo một component timer đơn giản.

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;

Ở đây, useEffect() được sử dụng để thiết lập một setInterval cập nhật state count mỗi giây. Hàm trả về trong useEffect() đảm bảo việc dọn dẹp setInterval khi component bị unmount, ngăn chặn rò rỉ bộ nhớ.

Tóm lại, useEffect() là một công cụ không thể thiếu khi làm việc với các hiệu ứng phụ trong React. Bằng cách hiểu rõ cách hoạt động và sử dụng mảng dependency một cách hiệu quả, bạn có thể tạo ra các component React mạnh mẽ và dễ bảo trì hơn.

Cảm ơn các bạn đã theo dõi.