Làm chủ Quản lý State trong React: Hướng dẫn cho Lập trình viên Toàn cầu

Trong thế giới phát triển front-end, quản lý state là một trong những thách thức quan trọng nhất. Đối với các lập trình viên sử dụng React, thách thức này đã phát triển từ một mối quan tâm đơn giản ở cấp độ component thành một quyết định kiến trúc phức tạp có thể định hình khả năng mở rộng, hiệu suất và khả năng bảo trì của một ứng dụng. Dù bạn là một lập trình viên solo ở Singapore, một thành viên của đội ngũ phân tán khắp châu Âu, hay một nhà sáng lập startup ở Brazil, việc hiểu rõ bối cảnh quản lý state trong React là điều cần thiết để xây dựng các ứng dụng mạnh mẽ và chuyên nghiệp.

Hướng dẫn toàn diện này sẽ đưa bạn đi qua toàn bộ quang phổ của việc quản lý state trong React, từ các công cụ tích hợp sẵn cho đến các thư viện bên ngoài mạnh mẽ. Chúng ta sẽ khám phá lý do 'tại sao' đằng sau mỗi cách tiếp cận, cung cấp các ví dụ mã nguồn thực tế, và đưa ra một khuôn khổ quyết định để giúp bạn chọn công cụ phù hợp cho dự án của mình, bất kể bạn đang ở đâu trên thế giới.

'State' trong React là gì, và Tại sao nó lại quan trọng đến vậy?

Trước khi chúng ta đi sâu vào các công cụ, hãy cùng thiết lập một sự hiểu biết rõ ràng, phổ quát về 'state'. Về bản chất, state là bất kỳ dữ liệu nào mô tả tình trạng của ứng dụng của bạn tại một thời điểm cụ thể. Nó có thể là bất cứ thứ gì:

• Người dùng có đang đăng nhập không?
• Văn bản trong một ô nhập liệu của form là gì?
• Một cửa sổ modal đang mở hay đóng?
• Danh sách sản phẩm trong giỏ hàng là gì?
• Dữ liệu có đang được lấy từ máy chủ không?

React được xây dựng trên nguyên tắc rằng UI là một hàm của state (UI = f(state)). Khi state thay đổi, React sẽ render lại một cách hiệu quả các phần cần thiết của UI để phản ánh sự thay đổi đó. Thách thức nảy sinh khi state này cần được chia sẻ và sửa đổi bởi nhiều component không có mối quan hệ trực tiếp trong cây component. Đây là lúc quản lý state trở thành một vấn đề kiến trúc quan trọng.

Nền tảng: Local State với useState

Hành trình của mọi lập trình viên React đều bắt đầu với hook useState. Đây là cách đơn giản nhất để khai báo một mẩu state cục bộ cho một component duy nhất.

Ví dụ, quản lý state của một bộ đếm đơn giản:

import React, { useState } from 'react';

function Counter() {
  // 'count' là biến state
  // 'setCount' là hàm để cập nhật nó
  const [count, setCount] = useState(0);

  return (
    

      
Bạn đã nhấp {count} lần
       setCount(count + 1)}>
        Nhấp vào tôi
      
    
  );
}

useState hoàn hảo cho state không cần chia sẻ, chẳng hạn như các ô nhập liệu của form, các nút bật/tắt, hoặc bất kỳ yếu tố UI nào có tình trạng không ảnh hưởng đến các phần khác của ứng dụng. Vấn đề bắt đầu khi bạn cần một component khác biết giá trị của `count`.

Cách tiếp cận cổ điển: Nâng State lên (Lifting State Up) và Prop Drilling

Cách truyền thống trong React để chia sẻ state giữa các component là "nâng nó lên" (lift it up) đến tổ tiên chung gần nhất của chúng. State sau đó được truyền xuống các component con thông qua props. Đây là một mẫu hình cơ bản và quan trọng của React.

Tuy nhiên, khi ứng dụng phát triển, điều này có thể dẫn đến một vấn đề được gọi là "prop drilling". Đây là khi bạn phải truyền props qua nhiều lớp component trung gian không thực sự cần dữ liệu đó, chỉ để đưa nó đến một component con nằm sâu bên trong cần nó. Điều này có thể làm cho mã nguồn khó đọc, tái cấu trúc và bảo trì hơn.

Hãy tưởng tượng tùy chọn giao diện của người dùng (ví dụ: 'tối' hoặc 'sáng') cần được truy cập bởi một nút nằm sâu trong cây component. Bạn có thể phải truyền nó như thế này: App -> Layout -> Page -> Header -> ThemeToggleButton. Chỉ có `App` (nơi state được định nghĩa) và `ThemeToggleButton` (nơi nó được sử dụng) quan tâm đến prop này, nhưng `Layout`, `Page`, và `Header` bị buộc phải đóng vai trò trung gian. Đây là vấn đề mà các giải pháp quản lý state tiên tiến hơn nhằm giải quyết.

Các giải pháp tích hợp sẵn của React: Sức mạnh của Context và Reducers

Nhận thấy thách thức của prop drilling, đội ngũ React đã giới thiệu Context API và hook `useReducer`. Đây là những công cụ mạnh mẽ, được tích hợp sẵn có thể xử lý một số lượng đáng kể các kịch bản quản lý state mà không cần thêm các thư viện phụ thuộc bên ngoài.

1. Context API: Truyền phát State trên Toàn cục

Context API cung cấp một cách để truyền dữ liệu qua cây component mà không cần phải truyền props xuống thủ công ở mọi cấp. Hãy coi nó như một kho dữ liệu toàn cục cho một phần cụ thể của ứng dụng của bạn.

Sử dụng Context bao gồm ba bước chính:

1. Tạo Context: Sử dụng `React.createContext()` để tạo một đối tượng context.
2. Cung cấp Context: Sử dụng component `Context.Provider` để bọc một phần của cây component của bạn và truyền một `value` cho nó. Bất kỳ component nào bên trong provider này đều có thể truy cập giá trị đó.
3. Sử dụng Context: Sử dụng hook `useContext` bên trong một component để đăng ký theo dõi context và nhận giá trị hiện tại của nó.

Ví dụ: Một bộ chuyển đổi giao diện đơn giản sử dụng Context

// 1. Tạo Context (ví dụ: trong file theme-context.js)
import { createContext, useState } from 'react';

export const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  // Đối tượng value sẽ có sẵn cho tất cả các component consumer
  const value = { theme, toggleTheme };

  return (
    
      {children}
    
  );
}

// 2. Cung cấp Context (ví dụ: trong file App.js chính của bạn)
import { ThemeProvider } from './theme-context';
import MyPage from './MyPage';

function App() {
  return (
    
      
    
  );
}

// 3. Sử dụng Context (ví dụ: trong một component lồng sâu)
import { useContext } from 'react';
import { ThemeContext } from './theme-context';

function ThemeToggleButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    
      Chuyển sang chế độ {theme === 'light' ? 'tối' : 'sáng'}
    
  );
}

Ưu điểm của Context API:

• Tích hợp sẵn: Không cần thư viện bên ngoài.
• Đơn giản: Dễ hiểu đối với state toàn cục đơn giản.
• Giải quyết Prop Drilling: Mục đích chính của nó là tránh truyền props qua nhiều lớp.

Nhược điểm và Lưu ý về Hiệu suất:

• Hiệu suất: Khi giá trị trong provider thay đổi, tất cả các component sử dụng context đó sẽ render lại. Đây có thể là một vấn đề về hiệu suất nếu giá trị context thay đổi thường xuyên hoặc các component sử dụng nó tốn kém để render.
• Không dành cho cập nhật tần suất cao: Nó phù hợp nhất cho các cập nhật tần suất thấp, chẳng hạn như giao diện, xác thực người dùng, hoặc tùy chọn ngôn ngữ.

2. Hook `useReducer`: Cho các Chuyển đổi State có thể Dự đoán

Trong khi `useState` rất tuyệt vời cho state đơn giản, `useReducer` là người anh em mạnh mẽ hơn của nó, được thiết kế để quản lý logic state phức tạp hơn. Nó đặc biệt hữu ích khi bạn có state bao gồm nhiều giá trị con hoặc khi state tiếp theo phụ thuộc vào state trước đó.

Lấy cảm hứng từ Redux, `useReducer` bao gồm một hàm `reducer` và một hàm `dispatch`:

• Hàm Reducer: Một hàm thuần túy (pure function) nhận `state` hiện tại và một đối tượng `action` làm đối số, và trả về state mới. `(state, action) => newState`.
• Hàm Dispatch: Một hàm bạn gọi với một đối tượng `action` để kích hoạt một cập nhật state.

Ví dụ: Một bộ đếm với các hành động tăng, giảm, và đặt lại

import React, { useReducer } from 'react';

// 1. Định nghĩa state ban đầu
const initialState = { count: 0 };

// 2. Tạo hàm reducer
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return initialState;
    default:
      throw new Error('Loại action không mong muốn');
  }
}

function ReducerCounter() {
  // 3. Khởi tạo useReducer
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      
Số đếm: {state.count}
      {/* 4. Dispatch các action khi người dùng tương tác */}
       dispatch({ type: 'increment' })}>+
       dispatch({ type: 'decrement' })}>-
       dispatch({ type: 'reset' })}>Đặt lại
    
  );
}

Sử dụng `useReducer` tập trung logic cập nhật state của bạn vào một nơi (hàm reducer), làm cho nó dễ dự đoán hơn, dễ kiểm thử hơn, và dễ bảo trì hơn, đặc biệt khi logic ngày càng phức tạp.

Cặp đôi hoàn hảo: `useContext` + `useReducer`

Sức mạnh thực sự của các hook tích hợp sẵn của React được nhận ra khi bạn kết hợp `useContext` và `useReducer`. Mẫu hình này cho phép bạn tạo ra một giải pháp quản lý state mạnh mẽ, giống Redux mà không cần bất kỳ thư viện phụ thuộc bên ngoài nào.

• `useReducer` quản lý logic state phức tạp.
• `useContext` truyền phát `state` và hàm `dispatch` đến bất kỳ component nào cần chúng.

Mẫu hình này rất tuyệt vời vì bản thân hàm `dispatch` có một định danh ổn định và sẽ không thay đổi giữa các lần render lại. Điều này có nghĩa là các component chỉ cần `dispatch` các hành động sẽ không render lại một cách không cần thiết khi giá trị state thay đổi, cung cấp một sự tối ưu hóa hiệu suất tích hợp sẵn.

Ví dụ: Quản lý một giỏ hàng đơn giản

// 1. Thiết lập trong cart-context.js
import { createContext, useReducer, useContext } from 'react';

const CartStateContext = createContext();
const CartDispatchContext = createContext();

const cartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      // Logic để thêm một mục
      return [...state, action.payload];
    case 'REMOVE_ITEM':
      // Logic để xóa một mục theo id
      return state.filter(item => item.id !== action.payload.id);
    default:
      throw new Error(`Hành động không xác định: ${action.type}`);
  }
};

export const CartProvider = ({ children }) => {
  const [state, dispatch] = useReducer(cartReducer, []);

  return (
    
      
        {children}
      
    
  );
};

// Các hook tùy chỉnh để sử dụng dễ dàng
export const useCart = () => useContext(CartStateContext);
export const useCartDispatch = () => useContext(CartDispatchContext);

// 2. Sử dụng trong các component
// ProductComponent.js - chỉ cần dispatch một action
function ProductComponent({ product }) {
  const dispatch = useCartDispatch();
  
  const handleAddToCart = () => {
    dispatch({ type: 'ADD_ITEM', payload: product });
  };

  return Thêm vào giỏ hàng;
}

// CartDisplayComponent.js - chỉ cần đọc state
function CartDisplayComponent() {
  const cartItems = useCart();

  return 
Số lượng trong giỏ hàng: {cartItems.length}
;
}

Bằng cách tách state và dispatch thành hai context riêng biệt, chúng ta có được lợi ích về hiệu suất: các component như `ProductComponent` chỉ dispatch các hành động sẽ không render lại khi state của giỏ hàng thay đổi.

Khi nào nên tìm đến các Thư viện bên ngoài

Mẫu hình `useContext` + `useReducer` rất mạnh mẽ, nhưng nó không phải là giải pháp cho mọi vấn đề. Khi ứng dụng mở rộng quy mô, bạn có thể gặp phải những nhu cầu được phục vụ tốt hơn bởi các thư viện bên ngoài chuyên dụng. Bạn nên xem xét một thư viện bên ngoài khi:

• Bạn cần một hệ sinh thái middleware phức tạp: Cho các tác vụ như ghi log, gọi API bất đồng bộ (thunks, sagas), hoặc tích hợp phân tích.
• Bạn yêu cầu các tối ưu hóa hiệu suất nâng cao: Các thư viện như Redux hoặc Jotai có các mô hình đăng ký theo dõi được tối ưu hóa cao giúp ngăn chặn các lần render lại không cần thiết hiệu quả hơn so với một thiết lập Context cơ bản.
• Gỡ lỗi theo dòng thời gian (time-travel debugging) là một ưu tiên: Các công cụ như Redux DevTools cực kỳ mạnh mẽ để kiểm tra các thay đổi state theo thời gian.
• Bạn cần quản lý server-side state (caching, đồng bộ hóa): Các thư viện như TanStack Query được thiết kế đặc biệt cho việc này và vượt trội hơn hẳn các giải pháp thủ công.
• State toàn cục của bạn lớn và được cập nhật thường xuyên: Một context lớn duy nhất có thể gây ra các điểm nghẽn về hiệu suất. Các trình quản lý state nguyên tử (atomic) xử lý điều này tốt hơn.

Một chuyến tham quan Toàn cầu các Thư viện Quản lý State Phổ biến

Hệ sinh thái React rất sôi động, cung cấp một loạt các giải pháp quản lý state, mỗi giải pháp có triết lý và sự đánh đổi riêng. Hãy cùng khám phá một số lựa chọn phổ biến nhất cho các lập trình viên trên toàn thế giới.

1. Redux (& Redux Toolkit): Tiêu chuẩn đã được khẳng định

Redux đã là thư viện quản lý state thống trị trong nhiều năm. Nó thực thi một luồng dữ liệu một chiều nghiêm ngặt, làm cho các thay đổi state trở nên dễ dự đoán và có thể truy vết. Mặc dù Redux ban đầu được biết đến với lượng mã soạn sẵn (boilerplate), cách tiếp cận hiện đại sử dụng Redux Toolkit (RTK) đã hợp lý hóa quy trình một cách đáng kể.

• Khái niệm cốt lõi: Một `store` toàn cục duy nhất chứa tất cả state của ứng dụng. Các component `dispatch` các `action` để mô tả những gì đã xảy ra. `Reducers` là các hàm thuần túy nhận state hiện tại và một action để tạo ra state mới.
• Tại sao lại là Redux Toolkit (RTK)? RTK là cách chính thức, được khuyến nghị để viết logic Redux. Nó đơn giản hóa việc thiết lập store, giảm mã soạn sẵn với API `createSlice` của nó, và bao gồm các công cụ mạnh mẽ như Immer để cập nhật bất biến dễ dàng và Redux Thunk cho logic bất đồng bộ ngay từ đầu.
• Điểm mạnh chính: Hệ sinh thái trưởng thành của nó là không đối thủ. Tiện ích mở rộng trình duyệt Redux DevTools là một công cụ gỡ lỗi đẳng cấp thế giới, và kiến trúc middleware của nó cực kỳ mạnh mẽ để xử lý các tác dụng phụ phức tạp.
• Khi nào nên sử dụng: Cho các ứng dụng quy mô lớn với state toàn cục phức tạp, liên kết với nhau, nơi mà tính dự đoán, khả năng truy vết, và trải nghiệm gỡ lỗi mạnh mẽ là tối quan trọng.

2. Zustand: Lựa chọn Tối giản và không áp đặt

Zustand, có nghĩa là "state" trong tiếng Đức, cung cấp một cách tiếp cận tối giản và linh hoạt. Nó thường được xem là một sự thay thế đơn giản hơn cho Redux, cung cấp các lợi ích của một store tập trung mà không có mã soạn sẵn.

• Khái niệm cốt lõi: Bạn tạo một `store` như một hook đơn giản. Các component có thể đăng ký theo dõi các phần của state, và các cập nhật được kích hoạt bằng cách gọi các hàm sửa đổi state.
• Điểm mạnh chính: Sự đơn giản và API tối thiểu. Nó cực kỳ dễ để bắt đầu và yêu cầu rất ít mã để quản lý state toàn cục. Nó không bọc ứng dụng của bạn trong một provider, làm cho nó dễ dàng tích hợp ở bất cứ đâu.
• Khi nào nên sử dụng: Cho các ứng dụng quy mô vừa và nhỏ, hoặc thậm chí cả những ứng dụng lớn hơn nơi bạn muốn có một store tập trung, đơn giản mà không có cấu trúc cứng nhắc và mã soạn sẵn của Redux.

// store.js
import { create } from 'zustand';

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

// MyComponent.js
function BearCounter() {
  const bears = useBearStore((state) => state.bears);
  return 
{bears} con gấu quanh đây ...
;
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation);
  return thêm một;
}

3. Jotai & Recoil: Cách tiếp cận Nguyên tử (Atomic)

Jotai và Recoil (từ Facebook) phổ biến hóa khái niệm quản lý state "nguyên tử". Thay vì một đối tượng state lớn duy nhất, bạn chia nhỏ state của mình thành các mẩu nhỏ, độc lập được gọi là "atoms".

• Khái niệm cốt lõi: Một `atom` đại diện cho một mẩu state. Các component có thể đăng ký theo dõi các atom riêng lẻ. Khi giá trị của một atom thay đổi, chỉ những component sử dụng atom cụ thể đó mới render lại.
• Điểm mạnh chính: Cách tiếp cận này giải quyết triệt để vấn đề hiệu suất của Context API. Nó cung cấp một mô hình tư duy giống React (tương tự như `useState` nhưng là toàn cục) và mang lại hiệu suất xuất sắc mặc định, vì các lần render lại được tối ưu hóa cao.
• Khi nào nên sử dụng: Trong các ứng dụng có nhiều mẩu state toàn cục động, độc lập. Nó là một sự thay thế tuyệt vời cho Context khi bạn thấy rằng các cập nhật context của mình đang gây ra quá nhiều lần render lại.

4. TanStack Query (trước đây là React Query): Vua của Server State

Có lẽ sự thay đổi mô hình quan trọng nhất trong những năm gần đây là nhận thức rằng phần lớn những gì chúng ta gọi là "state" thực chất là server state — dữ liệu tồn tại trên máy chủ và được lấy về, lưu vào bộ đệm (cache), và đồng bộ hóa trong ứng dụng client của chúng ta. TanStack Query không phải là một trình quản lý state chung chung; nó là một công cụ chuyên dụng để quản lý server state, và nó làm điều đó cực kỳ tốt.

• Khái niệm cốt lõi: Nó cung cấp các hook như `useQuery` để lấy dữ liệu và `useMutation` để tạo/cập nhật/xóa dữ liệu. Nó xử lý việc caching, lấy lại dữ liệu nền, logic stale-while-revalidate, phân trang, và nhiều hơn nữa, tất cả đều có sẵn.
• Điểm mạnh chính: Nó đơn giản hóa đáng kể việc lấy dữ liệu và loại bỏ nhu cầu lưu trữ dữ liệu máy chủ trong một trình quản lý state toàn cục như Redux hoặc Zustand. Điều này có thể loại bỏ một phần rất lớn mã quản lý state phía client của bạn.
• Khi nào nên sử dụng: Trong hầu hết mọi ứng dụng giao tiếp với một API từ xa. Nhiều lập trình viên trên toàn cầu hiện nay coi nó là một phần thiết yếu trong bộ công cụ của họ. Thông thường, sự kết hợp của TanStack Query (cho server state) và `useState`/`useContext` (cho UI state đơn giản) là tất cả những gì một ứng dụng cần.

Đưa ra Lựa chọn Đúng đắn: Một Khuôn khổ Quyết định

Việc chọn một giải pháp quản lý state có thể cảm thấy quá sức. Đây là một khuôn khổ quyết định thực tế, có thể áp dụng trên toàn cầu để hướng dẫn lựa chọn của bạn. Hãy tự hỏi những câu hỏi này theo thứ tự:

1. State có thực sự là toàn cục, hay nó có thể là cục bộ?
   Luôn bắt đầu với useState. Đừng giới thiệu state toàn cục trừ khi thực sự cần thiết.
2. Dữ liệu bạn đang quản lý có thực sự là server state không?
   Nếu đó là dữ liệu từ một API, hãy sử dụng TanStack Query. Nó sẽ xử lý việc caching, lấy dữ liệu, và đồng bộ hóa cho bạn. Nó có khả năng sẽ quản lý 80% "state" của ứng dụng của bạn.
3. Đối với UI state còn lại, bạn chỉ cần tránh prop drilling?
   Nếu state cập nhật không thường xuyên (ví dụ: giao diện, thông tin người dùng, ngôn ngữ), Context API tích hợp sẵn là một giải pháp hoàn hảo, không có thư viện phụ thuộc.
4. Logic UI state của bạn có phức tạp, với các chuyển đổi có thể dự đoán không?
   Kết hợp useReducer với Context. Điều này mang lại cho bạn một cách mạnh mẽ, có tổ chức để quản lý logic state mà không cần thư viện bên ngoài.
5. Bạn đang gặp vấn đề về hiệu suất với Context, hay state của bạn bao gồm nhiều mẩu độc lập?
   Hãy xem xét một trình quản lý state nguyên tử như Jotai. Nó cung cấp một API đơn giản với hiệu suất xuất sắc bằng cách ngăn chặn các lần render lại không cần thiết.
6. Bạn đang xây dựng một ứng dụng doanh nghiệp quy mô lớn đòi hỏi một kiến trúc nghiêm ngặt, có thể dự đoán, middleware, và các công cụ gỡ lỗi mạnh mẽ?
   Đây là trường hợp sử dụng chính cho Redux Toolkit. Cấu trúc và hệ sinh thái của nó được thiết kế cho sự phức tạp và khả năng bảo trì lâu dài trong các đội ngũ lớn.

Bảng so sánh tóm tắt

Giải pháp	Phù hợp nhất cho	Ưu điểm chính	Độ khó học
useState	State cục bộ của component	Đơn giản, tích hợp sẵn	Rất thấp
Context API	State toàn cục cập nhật ít (giao diện, xác thực)	Giải quyết prop drilling, tích hợp sẵn	Thấp
useReducer + Context	State UI phức tạp không cần thư viện ngoài	Logic có tổ chức, tích hợp sẵn	Trung bình
TanStack Query	Server state (cache/đồng bộ dữ liệu API)	Loại bỏ lượng lớn logic về state	Trung bình
Zustand / Jotai	State toàn cục đơn giản, tối ưu hiệu suất	Ít mã soạn sẵn, hiệu suất tuyệt vời	Thấp
Redux Toolkit	Ứng dụng quy mô lớn với state phức tạp, được chia sẻ	Tính dự đoán, công cụ dev mạnh mẽ, hệ sinh thái	Cao

Kết luận: Một góc nhìn Thực tế và Toàn cầu

Thế giới quản lý state trong React không còn là một cuộc chiến của thư viện này chống lại thư viện khác. Nó đã trưởng thành thành một bối cảnh phức tạp nơi các công cụ khác nhau được thiết kế để giải quyết các vấn đề khác nhau. Cách tiếp cận hiện đại, thực tế là hiểu rõ các sự đánh đổi và xây dựng một 'bộ công cụ quản lý state' cho ứng dụng của bạn.

Đối với hầu hết các dự án trên toàn cầu, một bộ công cụ mạnh mẽ và hiệu quả bắt đầu với:

1. TanStack Query cho tất cả server state.
2. useState cho tất cả UI state đơn giản, không được chia sẻ.
3. useContext cho UI state toàn cục đơn giản, cập nhật ít.

Chỉ khi những công cụ này không đủ, bạn mới nên tìm đến một thư viện state toàn cục chuyên dụng như Jotai, Zustand, hoặc Redux Toolkit. Bằng cách phân biệt rõ ràng giữa server state và client state, và bằng cách bắt đầu với giải pháp đơn giản nhất trước tiên, bạn có thể xây dựng các ứng dụng có hiệu suất cao, có khả năng mở rộng, và dễ dàng bảo trì, bất kể quy mô đội ngũ của bạn hay vị trí của người dùng.