- vừa được xem lúc

React Query Series - Bài 1 - Giới thiệu về React Query

0 0 10

Người đăng: Dylan

Theo Viblo Asia

Giới thiệu về React Query

Là một thư viện JavaScript dành cho React, cung cấp các công cụ để quản lý và tự động hỗ trợ các yêu cầu API trong ứng dụng React. Nó giúp bạn dễ dàng quản lý trạng thái và tình trạng của các yêu cầu API, tự động tải lại dữ liệu khi cần thiết và giảm bớt số lượng mã lệnh bạn cần viết để quản lý các yêu cầu API.

Sức mạnh của React Query

  • Quản lý cache data và cập nhật cực kỳ đơn giản với zero config
  • Không dùng global state, reducer để quản lý, không học thuật khó hiểu.
  • Có khả năng tương thích và mở rộng với mọi use-case

React Query và Redux

Nghe thì cữ nghĩ 2 thằng này giống như nhau nhưng thật sự có khá nhiều điểm khác nhau

  • React Query được viết ra để xử lý dữ liệu được lưu trữ trên server. Để truy cập dữ liệu này, ứng dụng của bạn cần sử dụng các yêu cầu bất đồng bộ. Đây là nơi bạn có thể muốn xử lý caching, loading state, network failures, v.v.
  • Redux là một thư viện quản lý trạng thái toàn cục cho ứng dụng React. Nó cung cấp một cách chặt chẽ để quản lý trạng thái và sử dụng các actions và reducers để thay đổi trạng thái. Redux rất mạnh mẽ và linh hoạt, nhưng có thể phức tạp cho một số dự án với yêu cầu quản lý trạng thái phức tạp.

React Query có thể dễ dàng tích hợp với Redux hoặc các thư viện quản lý trạng thái khác, nhưng cũng có thể được sử dụng độc lập nếu dự án của bạn chỉ cần quản lý trạng thái của các yêu cầu API.

Tại sao nên React Query ?

FUdYnYSVIAATx3_.jpeg

Có nhiều lý do vì sao bạn nên dùng React Query trong dự án React của mình:

  • Dễ sử dụng: React Query rất dễ sử dụng và cung cấp các công cụ để quản lý và tự động hỗ trợ các yêu cầu API, giúp bạn dễ dàng quản lý trạng thái và tình trạng của các yêu cầu API.
  • Tối ưu hóa tải: React Query tự động tải lại dữ liệu khi cần thiết và giữ cho dữ liệu đã tải lại trong cache, giúp tối ưu hóa tải trang và trải nghiệm người dùng.
  • Giảm số lượng mã: React Query giảm bớt số lượng mã lệnh bạn cần viết để quản lý các yêu cầu API, giúp tăng tốc độ phát triển và giảm thiểu lỗi.
  • Tích hợp đơn giản: React Query có thể dễ dàng tích hợp với các thư viện khác, như Redux hoặc thư viện quản lý trạng thái khác, giúp bạn tối ưu hóa việc sử dụng và quản lý trạng thái trong ứng dụng.
  • Mã nguồn mở: React Query là mã nguồn mở và có một cộng đồng phát triển đông đảo.

Demo

Dưới đây là 1 đoạn code demo nhỏ sử dụng React Query

import React from "react";
import { useQuery } from "react-query";
import axios from "axios";
const fetchTodos = () => { const { data } = axios.get("/api/todos"); return data;
};
const App = () => { const { data } = useQuery("todos", fetchTodos); return data ? ( <ul>{data.length > 0 && data.map((todo) => <li>{todo.text}</li>)}</ul> ) : null;
};

Đơn giản là đã thấy nó có khá nhiều điểm ngon ăn hơn Redux nhưng tuỳ trường hợp chúng sẽ dùng cả 2 thằng để tối ưu hơn. Vì đây là bài đầu tiên trong series nên mong mọi người ủng hộ. Mình sẽ cố gắng viết thêm nhiều bài về React Query cũng như React hơn. Thanks.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Cùng tìm hiểu về các hook trong React hooks

Đối với ai đã từng làm việc với React thì chắc hẳn đã có những lúc cảm thấy bối rối không biết nên dùng stateless (functional) component hay là stateful component. Nếu có dùng stateful component thì cũng sẽ phải loay hoay với đống LifeCycle 1 cách khổ sở Rất may là những nhà phát triển React đã kịp

0 0 81

- vừa được xem lúc

Khi nào nên (và không nên) sử dụng Redux

. Công việc quản lý state với những hệ thống lớn và phức tạp là một điều khá khó khăn cho đến khi Redux xuất hiện. Lấy cảm hứng từ design pattern Flux, Redux được thiết kế để quản lý state trong các project JavaScript.

0 0 106

- vừa được xem lúc

ReactJS: Props và State

Nếu bạn đã học ReactJS hay React Native, bạn sẽ thấy các Props và State được sử dụng rất nhiều. Vậy chính xác chúng là gì? Làm thế nào để chúng ta sử dụng chúng đúng mục đích đây.

0 0 41

- vừa được xem lúc

State và Props trong Reactjs

Hello các bạn, tiếp tục seri tìm hiểu về ReactJs hôm nay mình xin giới thiệu đến các bạn hai thứ mình cho là thú vị nhất của ReactJs là State và Props. State bạn có thể hiểu đơn giản là một nơi mà bạn lưu trữ dữ liệu của Component, từ đó bạn có thể luân chuyển dữ liệu đến các thành phần trong Compon

0 0 36

- vừa được xem lúc

Memoization trong React

. 1.Introduction. Memoization có liên quan mật thiết đến bộ nhớ đệm, và dưới đây là một ví dụ đơn giản:. const cache = {}.

0 0 38

- vừa được xem lúc

Nâng cao hiệu suất React Hooks với React.memo, Memoization và Callback Functions

1.Ngăn Re-render và React.memo. React.

0 0 67