Say Goodbye to useEffect for Data Fetching in React: Embrace TanStack Query!

Lê Lân

29/07/2025

Sử Dụng TanStack Query Để Quản Lý Dữ Liệu Bất Đồng Bộ Trong React: Tạm Biệt useEffect Phức Tạp

Mở Đầu

Nếu dự án React của bạn ngập tràn các hook chỉ để xử lý lấy dữ liệu, đã đến lúc bạn cần nâng cấp cách tiếp cận.

React cung cấp cho chúng ta rất nhiều công cụ mạnh mẽ, trong đó có useEffect để đồng bộ dữ liệu và thực thi các tác vụ phụ. Tuy nhiên, với sức mạnh ấy đôi khi đồng nghĩa với việc chúng ta phải đối mặt với lượng boilerplate code khổng lồ, khó quản lý và bảo trì. Đặc biệt là khi thực hiện các tác vụ lấy dữ liệu từ API, việc xử lý loading, error, hủy bỏ request, cache, đồng bộ lại dữ liệu,... trở nên phức tạp và dễ gây lỗi.

Bài viết này sẽ dẫn dắt bạn qua những giới hạn của useEffect trong việc lấy dữ liệu, và giới thiệu một giải pháp hiện đại, hiệu quả hơn - TanStack Query (trước đây gọi là React Query). Đây là thư viện giúp bạn quản lý trạng thái dữ liệu bất đồng bộ một cách thông minh và tiện lợi hơn rất nhiều.

Vấn Đề Khi Dùng useEffect Để Lấy Dữ Liệu

Ví dụ điển hình với useEffect

import { useState, useEffect } from 'react';

const Users = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    const fetchUsers = async () => {
      try {
        const res = await fetch('/api/users', { signal: controller.signal });
        const data = await res.json();
        setUsers(data);
      } catch (err) {
        if (err.name !== 'AbortError') setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();

    return () => controller.abort();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {users.map(u => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
};

Dù có vẻ ổn ở quy mô nhỏ, nhưng khi ứng dụng của bạn mở rộng, việc kiểm soát nhiều trạng thái API như tải, lỗi, hủy bỏ, cache, đồng bộ lại dữ liệu... sẽ làm code trở nên rối và khó bảo trì.

Những khó khăn gặp phải:

Quản lý nhiều call API trong cùng một component hoặc nhiều component chia sẻ dữ liệu

Xử lý cache và đồng bộ dữ liệu khi window được focus lại hoặc thiết bị mạng thay đổi

Tự viết logic tránh race condition khi nhiều request xảy ra gần như đồng thời

Không có cơ chế tích hợp để tự động retry hoặc invalidate dữ liệu

Cần quản lý thủ công trạng thái loading, error, success ở từng nơi

Dễ bị trùng lặp code và tăng độ phức tạp khi mở rộng

Giới Thiệu TanStack Query — Cách Mạng Lấy Dữ Liệu Trong React

TanStack Query là thư viện giúp bạn quản lý trạng thái dữ liệu bất đồng bộ một cách hiệu quả, giúp giảm thiểu boilerplate code và tăng khả năng mở rộng của ứng dụng React.

Ví dụ dùng TanStack Query để lấy danh sách người dùng

import { useQuery } from '@tanstack/react-query';

const fetchUsers = async () => {
  const res = await fetch('/api/users');
  if (!res.ok) throw new Error('Network response was not ok');
  return res.json();
};

const Users = () => {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map(u => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
};

Chỉ với vài dòng và không cần <u>state</u> , useEffect hay AbortController , bạn đã có một giải pháp lấy dữ liệu đơn giản, sạch sẽ và mạnh mẽ.

Vì Sao TanStack Query Lại “Rất Ngon”?

Những tính năng nổi bật

⭐ Tự động cache: Dữ liệu được lưu giữ và tái sử dụng thông minh, giảm tải request thừa.

⭐ Refetch nền: Tự động cập nhật dữ liệu khi cần, ví dụ khi tab trình duyệt được focus lại.

⭐ Hỗ trợ phân trang và truy vấn vô hạn: Xử lý các bài toán phức tạp hiệu quả.

⭐ Cập nhật lạc quan: Cho phép cập nhật UI tức thì, ngay trước khi server phản hồi.

⭐ Tự động retry khi gặp lỗi: Giúp tăng tính ổn định mạng.

⭐ Hủy request tự động: Giúp tránh rò rỉ bộ nhớ và lỗi race condition.

⭐ Công cụ Devtools: Dễ dàng debug các query và trạng thái.

⭐ Hỗ trợ SSR: Tương thích hoàn hảo với server-side rendering.

⭐ Không giới hạn fetch library: Có thể dùng cùng Axios, fetch, GraphQL, v.v.

Khi Nào Nên Dùng TanStack Query?

Dùng khi:

Xây dựng ứng dụng có nhiều API calls.

Cần chia sẻ dữ liệu giữa nhiều component.

Muốn tránh tự viết thủ công state loading, error, cach và đồng bộ.

Cần một phương pháp khai báo, reactive và declarative hơn.

Muốn mở rộng app sạch hơn, bảo trì dễ dàng.

Không cần dùng khi:

Ứng dụng đơn giản, static hoặc chỉ lấy dữ liệu cục bộ (localStorage, sessionStorage).

Không cần caching hoặc đồng bộ dữ liệu phức tạp.

Bạn muốn kiểm soát chi tiết từng bước lấy dữ liệu (mặc dù TanStack Query vẫn có thể đáp ứng).

Kết Luận

Sử dụng TanStack Query là một bước tiến lớn cho các ứng dụng React cần quản lý dữ liệu bất đồng bộ một cách tối ưu và hiệu quả. Thay vì cồng kềnh với useEffect , bạn hãy lựa chọn một giải pháp chuyên dụng, giúp code trở nên sạch sẽ, nhanh hơn và dễ mở rộng.

Từ bỏ cách lấy dữ liệu thủ công, chuyển sang declarative data fetching cùng TanStack Query để viết các ứng dụng React thông minh hơn.

Hãy bắt đầu cài đặt và trải nghiệm ngay hôm nay để nâng cấp kỹ năng và sản phẩm của bạn lên một tầm cao mới!

Tham Khảo

TanStack Query Official Documentation

Tanner Linsley, “React Query: Server State Management Made Easy”, 2022.

ReactJS Official Docs - useEffect Hook, April 1, 2024

Blog post: “Why React Query Is a Game-Changer for Data Fetching” - CSS-Tricks

GitHub Repository: tanstack/query