Tối ưu hóa việc truy vấn dữ liệu trong ReactJS Với useQuery

Trong thế giới phát triển ứng dụng web hiện đại, việc quản lý hiệu quả quá trình truy vấn và cập nhật dữ liệu từ các nguồn bên ngoài (như API) là rất quan trọng. React Query, một thư viện phổ biến trong hệ sinh thái React, cung cấp một giải pháp mạnh mẽ thông qua hook useQuery.

useQuery là gì?

useQuery là một hook tùy chỉnh được cung cấp bởi React Query, cho phép bạn thực hiện các truy vấn dữ liệu một cách khai báo và quản lý trạng thái của dữ liệu đó (loading, error, success) một cách tự động. Nó cung cấp các tính năng như caching, refetching tự động và xử lý lỗi, giúp bạn tiết kiệm thời gian và công sức trong việc xây dựng các ứng dụng React tương tác với dữ liệu.

Cách sử dụng useQuery

1. Cài đặt React Query:

npm install react-query.

2. Sử dụng useQuery:

import { useQuery } from 'react-query';

function MyComponent() {
const { isLoading, error, data } = useQuery('myDataKey', fetchData);

if (isLoading) return 'Loading...';

if (error) return 'An error has occurred: ' + error.message;

return (
  <div>
    <h1>My Data</h1>
    <p>{data}</p>
  </div>
);
}

Trong ví dụ trên:

• myDataKey: Là một key duy nhất để định danh truy vấn.
  
• fetchData: Là một hàm bất đồng bộ (async function) thực hiện việc lấy dữ liệu từ API.

Các tính năng nổi bật của useQuery

• Caching: React Query tự động lưu trữ dữ liệu vào cache, giúp giảm thiểu số lần gọi API không cần thiết.
• Refetching: Bạn có thể thiết lập các tùy chọn để tự động refetch dữ liệu khi cần (ví dụ: khi người dùng quay lại trang hoặc sau một khoảng thời gian nhất định).
• Xử lý lỗi: useQuery cung cấp các trạng thái isLoading và error để bạn dễ dàng xử lý các trường hợp loading và lỗi.
• Optimistic UI: Bạn có thể cập nhật giao diện người dùng tạm thời trước khi nhận được phản hồi từ API, tạo trải nghiệm mượt mà hơn cho người dùng.

Khi nào nên sử dụng useQuery?

• Khi bạn cần truy vấn dữ liệu từ API và hiển thị dữ liệu đó trong component React.
• Khi bạn muốn giảm thiểu số lần gọi API không cần thiết bằng cách sử dụng caching.
• Khi bạn cần tự động cập nhật dữ liệu khi có sự thay đổi từ phía server.
• Khi bạn muốn xử lý lỗi một cách dễ dàng và hiển thị thông báo lỗi cho người dùng.

Kết luận

useQuery là một công cụ mạnh mẽ giúp đơn giản hóa việc truy vấn và quản lý dữ liệu trong các ứng dụng React. Với các tính năng như caching, refetching và xử lý lỗi, useQuery giúp bạn tiết kiệm thời gian và công sức, đồng thời mang lại trải nghiệm người dùng tốt hơn.

Link Docs: https://tanstack.com/query/v4/docs/react/reference/useQuery