Bài 4: React Hooks – Kiểm soát vòng đời component

Ở bài trước, chúng ta đã dùng useState để lưu trữ dữ liệu động. Hôm nay, chúng ta sẽ làm quen với một Hook quyền lực không kém: useEffect. Đây là nơi giúp bạn quản lý Vòng đời (Lifecycle) của Component và xử lý các tác vụ ngoại vi (Side Effects).

Side Effect là gì?

Trong React, Side Effect là các hành động tương tác với thế giới bên ngoài component, ví dụ:

• Gọi API lấy dữ liệu (Fetch API).
• Tự động chạy bộ đếm thời gian (setTimeout, setInterval).
• Thay đổi tựa đề trang web (document.title).

Nếu bạn viết trực tiếp các tác vụ này vào thân Component, chúng sẽ bị gọi lại vô tận sau mỗi lần re-render. useEffect ra đời để giúp bạn “cô lập” các tác vụ đó và chỉ cho phép chúng chạy vào những thời điểm cụ thể.

Cú pháp và 3 cách dùng useEffect

useEffect(() => {
  // Đoạn code xử lý Side Effect
}, [dependencies]);

Tùy vào cách bạn truyền tham số thứ hai ([dependencies]), useEffect sẽ hoạt động theo 3 chế độ sau:

Trường hợp 1: Không truyền mảng phụ thuộc

useEffect(() => {
  console.log("Chạy lại sau MỖI lần re-render");
});

Trường hợp 2: Truyền mảng phụ thuộc rỗng []

useEffect(() => {
  console.log("Chạy DUY NHẤT 1 LẦN khi component vừa xuất hiện (Mounted)");
  // Thường dùng để gọi API lấy dữ liệu lần đầu tiên
}, []);

Trường hợp 3: Truyền các giá trị tham chiếu vào mảng phụ thuộc [dep_1,…dep_n]

const [count, setCount] = useState<number>(0);

useEffect(() => {
  console.log("Chạy lại CHỈ KHI biến số thay đổi");
  // Các giá trị tham chiếu phụ thuộc bao gồm các props, state, biến và hàm
  // được khai báo trực tiếp bên trong phần thân của component.
}, [count, fetchCount]);

Thực hành: Bộ đếm giây tự động

Hãy thử tạo một bộ đếm giây tự động tăng dần khi component vừa xuất hiện bằng cách tạo file Timer.jsx:

import { useState, useEffect } from 'react';

function Timer() {
  // Định nghĩa kiểu dữ liệu number cho State
  const [seconds, setSeconds] = useState<number>(0);

  useEffect(() => {
    // Tự động tăng mỗi 1 giây
    const interval = setInterval(() => {
      setSeconds((prev: number) => prev + 1);
    }, 1000);

    // Hàm dọn dẹp (Cleanup) khi component bị ẩn đi
    return () => clearInterval(interval);
  }, []); // Mảng rỗng đảm bảo bộ đếm chỉ tạo 1 lần duy nhất

  return <h4>Thời gian: {seconds} giây ⏳</h4>;
}

export default Timer;

Lời kết

Để kiểm soát vòng đời component với useEffect, hãy nhớ quy tắc bỏ túi:

1. Không có []: Re-render là chạy.
2. Có [] rỗng: Chỉ chạy 1 lần duy nhất lúc khởi tạo.
3. Có [dependencies]: Giá trị tham chiếu thay đổi mới chạy.

Như vậy, chúng ta đã biết quản lý State và Vòng đời dữ liệu. Ở bài tiếp theo, chúng ta sẽ học cách xử lý cấu trúc dữ liệu cực kỳ phổ biến trong thực tế: Bài 5: Context API – Quản lý trạng thái toàn cục. Cùng chờ đón nhé!