Giải mã bí kíp fetch dữ liệu siêu tốc trong React: Tạm biệt useEffect "ác mộng"!

Lê Lân

18/06/2025

Cách Tiếp Cận Mới Trong Fetch Dữ Liệu React: Prefetching, Shared Store và Custom Hook

Mở Đầu

Khi xây dựng ứng dụng React hiện đại, đặc biệt là những ứng dụng cần lấy dữ liệu từ bên ngoài (ví dụ như cơ sở dữ liệu phim), bạn thường sử dụng useEffect() như công cụ chính để xử lý fetch dữ liệu. Tuy nhiên, phương pháp này tồn tại nhiều hạn chế như không hỗ trợ server-side rendering, gây ra mạng thác nước (network waterfalls), hiện tượng race conditions và thiếu khả năng caching hay preload dữ liệu hiệu quả.

Trong bài viết này, tôi sẽ giới thiệu một kỹ thuật đơn giản, dễ mở rộng và không phụ thuộc thư viện bên ngoài để quản lý fetch dữ liệu trong React. Phương pháp này sử dụng các tính năng cốt lõi của JavaScript như sự kiện (events) và bộ nhớ đệm (memory caching) để tăng hiệu quả và trải nghiệm người dùng trong các ứng dụng đơn trang (SPA). Hãy cùng khám phá!

👎 Cách Cũ: `useEffect()` Sử Dụng Ồ Ạt

Phân Tích Vấn Đề Với `useEffect()`

Thông thường, bạn sẽ có những hàm fetch dữ liệu như:

getActorList() lấy danh sách diễn viên

getActorDetails(id) lấy chi tiết diễn viên theo ID

Và mỗi trang hoặc thành phần sẽ gọi các hàm này bên trong hook useEffect() để thực hiện fetch dữ liệu sau khi component render.

Nhưng điều này dẫn tới:

Dữ liệu được lấy sau khi component đã render, gây chậm trễ trong hiển thị.

Khi chuyển trang, những request giống nhau bị gọi lại nhiều lần, không tận dụng được cache.

Không có cách đơn giản để chia sẻ dữ liệu giữa các component hoặc duy trì dữ liệu giữa các lần chuyển trang.

Việc sử dụng quá nhiều useEffect() cho fetch dẫn đến một cấu trúc khó bảo trì, kém tối ưu.

✅ Cách Mới: Prefetching + Shared Store + Custom Hook

1. Kho Dữ Liệu Chung (Shared Data Store)

Thay vì fetch dữ liệu rải rác trong các component, ta giữ một store chung trong bộ nhớ dưới dạng một đối tượng Map hoặc Object để lưu trữ dữ liệu theo key.

const store = new Map();

Các component hoặc hook sẽ tương tác với store này để truy xuất hoặc lắng nghe dữ liệu mới.

2. Custom Hook: `useData(key)`

Hook này kiểm tra dữ liệu có trong store không. Nếu có, trả về ngay dữ liệu đó. Nếu chưa có, nó lắng nghe sự kiện dataFetched để cập nhật khi dữ liệu được nạp.

function useData(key) {
  const [data, setData] = useState(null);

  if (store.has(key)) return store.get(key);

  useEffect(() => {
    const onDataFetched = () => {
      if (store.has(key)) setData(store.get(key));
    };

    window.addEventListener('dataFetched', onDataFetched);
    return () => window.removeEventListener('dataFetched', onDataFetched);
  }, [key]);

  return data;
}

Hook giúp component lấy dữ liệu mà không cần dùng useEffect để fetch riêng lẻ, giảm độ phức tạp và delay.

3. Lớp Dịch Vụ Xử Lý API (Service Layer)

Tất cả logic fetch API được gom vào 1 file duy nhất như services.js để dễ bảo trì:

// services.js
export async function getActorList(movieId) {
  // Fetch danh sách diễn viên
}

export async function getActorDetails(actorId) {
  // Fetch chi tiết diễn viên
}

4. Các Hàm Prefetch (Tiền Tải Dữ Liệu)

Chúng ta xây dựng hàm để tiền tải dữ liệu trước khi component cần:

function prefetchData(key, fn) {
  fn().then(data => {
    store.set(key, data);
    window.dispatchEvent(new Event('dataFetched'));
  });
}

function prefetchDataOnEvent(key, fn) {
  if (store.has(key)) return;
  prefetchData(key, fn);
}

prefetchData giúp đẩy dữ liệu vào store và phát tín hiệu cho các component đang chờ.

5. Ví Dụ Thực Tế: Trang Phim "Inception"

Giả sử bạn có một trang phim "Inception", và muốn hiển thị danh sách diễn viên ngay khi người dùng truy cập:

5.1 Tiền Tải Dữ Liệu Tại Component Cha

prefetchData('inception-cast', () => getActorList('inception'));

5.2 Sử Dụng Dữ Liệu Trong Trang Con

function MovieHome() {
  const actors = useData('inception-cast');
  // Hiển thị danh sách diễn viên ngay lập tức
}

Không cần useEffect , dữ liệu sẵn sàng nếu đã được tải trước.

5.3 Tiền Tải Khi Người Dùng Hover Hoặc Tập Trung Link

Khi người dùng rê chuột vào tên diễn viên để chuẩn bị truy cập trang chi tiết:

<Link to={`/actor/${actor.id}`}
  onMouseEnter={() => prefetchDataOnEvent(actor.id, () => getActorDetails(actor.id))}>
  Xem Chi Tiết
</Link>

Ở trang chi tiết:

function ActorDetails({ actorId }) {
  const actor = useData(actorId);
  // Dữ liệu chi tiết được lấy từ cache nếu đã prefetch
}

Nếu chưa prefetch, dữ liệu sẽ được lấy, chỉ là thời gian chờ lâu hơn.

⚡ Ưu Điểm Của Phương Pháp Này

Ưu điểm	Ý nghĩa
✅ Không cần thư viện bên ngoài	Giúp giảm phụ thuộc, giữ ứng dụng nhẹ và linh hoạt
✅ Tránh được "useEffect hell"	Mã nguồn gọn gàng, dễ bảo trì
✅ Tái sử dụng dữ liệu liên tục	Không phải tải lại khi chuyển trang
✅ Dễ dàng preload và cache	Hiệu quả tối ưu trải nghiệm người dùng
✅ Mô hình đơn giản, trực quan	Dễ hiểu, dễ dùng cho cả những dev mới

Phương pháp này thích hợp cho SPA đơn giản đến trung bình, không dùng SSR và không cần các công cụ fetch phức tạp.

🧪 Khi Nào Nên Áp Dụng?

Ứng dụng SPA không chạy server-side rendering (ví dụ create-react-app, Vite).

Dự án có luồng chuyển trang rõ ràng, predictable.

Các trang lặp lại hoặc lồng nhau thường gọi API cùng loại.

Không muốn dùng React Query, SWR hoặc các thư viện fetch nâng cao.

🚀 Kết Luận

Phương pháp prefetch + shared store + custom hook giúp bạn kiểm soát việc lấy và cache dữ liệu trong React một cách Thuần túy, không rườm rà.

Tuy nhiên nó vẫn có thể được mở rộng thêm các tính năng như:

Xử lý lỗi (error handling) để tránh tình trạng fetch thất bại.

Trạng thái tải (loading, error, success) giúp component render linh hoạt.

Cơ chế làm mới dữ liệu (cache invalidation) theo thời gian hoặc thủ công.

Đây là một nền tảng mạnh mẽ cho những ứng dụng cần tối ưu đơn giản, từ đó bạn có thể phát triển thêm theo nhu cầu.

Tôi rất mong nhận được phản hồi từ bạn: liệu bạn đã từng dùng phương pháp tương tự chưa? Bạn thường dùng cách nào để quản lý dữ liệu client-side trong React?