Khám Phá Hook useEffect() Trong React

Trong thế giới phát triển web hiện đại, React đã trở thành một framework phổ biến cho xây dựng giao diện người dùng. Một trong những tính năng quan trọng của React là Hook, và useEffect() là một trong những Hook mạnh mẽ nhất mà bạn không thể bỏ qua. Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về Hook useEffect() và cách sử dụng nó để thực hiện các hiệu ứng phụ trong các component chức năng.

useEffect() Là Gì?

useEffect() là một Hook được sử dụng để thực hiện các thao tác phản ứng sau khi một component đã được render. Điều này bao gồm việc gọi dữ liệu từ API, cập nhật DOM, hoặc thiết lập các timer. Có thể hiểu useEffect() như một cầu nối giữa component React và các tác vụ bên ngoài.

Cấu Trúc useEffect()

Hook useEffect() nhận vào hai tham số chính:

Hàm hiệu ứng phụ: Đoạn mã mà bạn muốn thực hiện.
Mảng dependency: Là một mảng các giá trị mà bạn có thể sử dụng để kiểm soát thời điểm hàm hiệu ứng được chạy lại. Nếu bạn truyền vào mảng rỗng ([]), hàm hiệu ứng sẽ chỉ được gọi một lần, khi component lần đầu được mount.

Ví Dụ Về useEffect()

1. Lấy Dữ Liệu từ API

Giả sử bạn muốn tạo một component có khả năng lấy dữ liệu người dùng từ một API. Bạn có thể thực hiện điều này bằng cách sử dụng useEffect() như sau:

javascript Copy

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

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

  useEffect(() => {
    // Lấy dữ liệu từ API
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((err) => setError("Lỗi khi lấy dữ liệu"));
  }, []);

  return (
    <div style={{ maxWidth: "1200px", margin: "0 auto", padding: "20px" }}>
      <h1 style={{ textAlign: "center", marginBottom: "20px", color: "#333" }}>
        Dữ Liệu Người Dùng
      </h1>

      {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" }}>Tên</th>
              <th style={{ padding: "10px", textAlign: "left" }}>Tài Khoản</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;

2. Tạo Timer Sử Dụng useEffect()

Một ví dụ khác về useEffect() chính là thiết lập một bộ đếm thời gian (timer) đơn giản:

javascript Copy

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} giây</h1>
        <p style={{ marginTop: "15px", fontSize: "1.2rem", color: "#666" }}>Timer đang chạy với Hook useEffect</p>
      </div>
    </div>
  );
}

export default TimerComponent;

Kết Luận

Hook useEffect() là một công cụ không thể thiếu trong React, đặc biệt khi bạn làm việc với các hiệu ứng phụ. Việc hiểu rõ cách hoạt động của useEffect() cũng như sử dụng hiệu quả mảng dependency sẽ giúp bạn tạo ra những component React mạnh mẽ và dễ bảo trì hơn. Hãy thử nghiệm với các ví dụ trên và khám phá thêm nhiều ứng dụng khác của Hook này trong dự án của bạn. Cảm ơn bạn đã theo dõi bài viết này!
source: viblo

Tìm Hiểu Chi Tiết Về Hook useEffect() Trong React