Khi State Chỉ Đơn Giản Là State

Thời kỳ 'Redux cho mọi thứ' và cái giá thật sự của nó: mỗi endpoint lặp lại các slice loading/error/data, caching tự viết tay, mutation đồng bộ giữa các màn hình, và remote data re-render local UI sau mỗi keystroke. Việc tách server state và client state là phản ứng cho điều đó.

Khái niệm Server State

Server state qua năm tính chất (remote, async, eventually consistent, shared, persistent) và sáu bước mà cache layer nào cũng phải chạy: fetch, cache, serve, revalidate, mutate, invalidate. Xem việc tự viết từng bước cho mỗi endpoint tốn gì.

Server State Trong Thực Tế

Đi qua hai case server-state hay gặp nhất với TanStack Query: một list users được cache feeding ba màn hình qua shared queryKey, và một optimistic role change với cancelQueries, snapshot, rollback, và invalidate. Cả hai đều dùng lại sáu bước từ Phần 2.

Khái Niệm Client State

Client state qua ba tính chất (locally owned, synchronous, per-device), bốn loại nó thực sự cover (UI, drafts, preferences, view/selection), và năm bậc thang scoping để đặt nó vào đúng chỗ. Cùng ba thứ trông giống client state nhưng không nên nằm trong đó.

Client State Trong Thực Tế

Code cho từng bậc thang: useState trước, lift lên parent kế tiếp, useReducer khi transition quan trọng, cái bẫy re-render của Context, model selector của Zustand với persist middleware, và nuqs cho URL state sống sót qua refresh.

Sư Lựa Chọn Giữa Các Library

So sánh trực tiếp các library cho server state (TanStack Query, SWR, RTK Query, Relay) và cho client state (Zustand, Jotai, Valtio, useState + useContext, useReducer). Chọn library nào trong cùng một cột là chuyện taste. Việc tách hai phía mới là thứ không đổi khi library đổi.

Trang chủ
Hướng dẫn
React Client And Server State

Indie Dev ToolkitPhần 3 / 9

Chương 2: Modern Frontend Development with React

React Client And Server State

Name: React Client And Server State
Author: Nguyễn Phi Vũ

Nguyễn Phi Vũ

Lead Engineer, NAB - 19 thg 4, 2026

Đây là Phần 3 của series Modern Frontend Development. Trước đây 'state' chỉ có một chỗ duy nhất và mọi thứ đều bỏ vào đó: API responses, modals, form drafts, theme, tất cả nằm chung một store. Sau khi khái niệm về Server State và Client State ra đời, các công cụ và patterns cho mỗi phía trở nên rõ ràng hơn rất nhiều.

Bạn sẽ thấy server state và client state được xử lý thế nào trong các tình huống thực tế cùng với các library phổ biến như Tanstack Query và Zustand. Giúp bạn biết cách lựa chọn library cho từng trường hợp và hiểu rõ tại sao dựa trên đặc tính của server vs client state chứ không phải theo thói quen hay tech hype.

Yêu cầu

Có kiến thức về React và quản lý state trong React
Đã làm việc với ít nhất một data-fetching pattern (fetch + useEffect, SWR, hoặc TanStack Query)
Phần 2 (React Frontend Architecture) được khuyến khích, nhưng không bắt buộc

Server vs Client State

Về tác giả

Nguyễn Phi Vũ

NAB, Lead Engineer

Mình là Vũ, hiện là Lead Engineer ở NAB (National Australia Bank). Mình bắt đầu ở mảng Home Lending, giờ đang lead một team làm sản phẩm cho HICAPS, dịch vụ point-of-sale claiming bảo hiểm sức khỏe tư nhân lớn nhất ở Úc. Trước NAB, mình từng làm ở các startup và nhiều team khác với đa dạng stack.

Upskills là nơi mình chia sẻ những kiến thức thực tế từ công việc, để giúp bạn build và ship dự án tốt hơn. Ngoài tutorial, sắp tới sẽ có thêm nhiều nội dung: project showcase, interview prep, và các AI tool, như những resource cho hành trình học của bạn. Mình rất vui được chia sẻ những kiến thức và kinh nghiệm đã học được trong suốt quá trình làm việc, và có thể chia sẻ thêm nhiều điều thú vị cùng nhau khi chúng ta tiếp tục build những thứ hay ho.

Từ newsletter của Upskills

Hy vọng bạn thấy React Client And Server State hữu ích. Nhận bài tiếp theo qua email nhé?

Các bài deep-dive về web development thực tế, một đến hai tuần một số, viết bởi engineer thực sự có kinh nghiệm build sản phẩm. Không sáo rỗng, không câu view.

Ví dụ thực tế, dùng được trong production
Không bao giờ spam
Hủy đăng ký chỉ với một click

Chúng tôi tôn trọng quyền riêng tư. Hủy đăng ký bất cứ lúc nào.

Trang chủ
Hướng dẫn
React Client And Server State

Indie Dev ToolkitPhần 3 / 9

Chương 2: Modern Frontend Development with React

React Client And Server State

Nguyễn Phi Vũ

Lead Engineer, NAB - 19 thg 4, 2026

Yêu cầu

Có kiến thức về React và quản lý state trong React
Đã làm việc với ít nhất một data-fetching pattern (fetch + useEffect, SWR, hoặc TanStack Query)
Phần 2 (React Frontend Architecture) được khuyến khích, nhưng không bắt buộc

Server vs Client State

Về tác giả

Nguyễn Phi Vũ

NAB, Lead Engineer

Từ newsletter của Upskills

Hy vọng bạn thấy React Client And Server State hữu ích. Nhận bài tiếp theo qua email nhé?

Các bài deep-dive về web development thực tế, một đến hai tuần một số, viết bởi engineer thực sự có kinh nghiệm build sản phẩm. Không sáo rỗng, không câu view.

Ví dụ thực tế, dùng được trong production
Không bao giờ spam
Hủy đăng ký chỉ với một click

Chúng tôi tôn trọng quyền riêng tư. Hủy đăng ký bất cứ lúc nào.