Zustand là gì? So sánh với Redux về độ phức tạp?

Zustand là thư viện quản lý state nhỏ gọn cho React, không yêu cầu boilerplate như Redux — không cần actions, reducers, dispatch, hay Provider wrapper.

API chỉ gồm hàm create trả về một hook, state và actions định nghĩa cùng chỗ.
Bundle size ~1KB so với Redux Toolkit ~40KB khi đầy đủ.

Ví dụ tạo store đơn giản: const useStore = create(set => ({ count: 0, inc: () => set(s => ({ count: s.count + 1 })) })), dùng trong component: const count = useStore(s => s.count).

Zustand is a small, lightweight state management library for React that requires no boilerplate like Redux — no actions, reducers, dispatch, or Provider wrapper needed.

The API consists of a single create function that returns a hook, with state and actions defined in the same place.
Bundle size is ~1KB compared to Redux Toolkit at ~40KB fully loaded.
Example of creating a simple store: const useStore = create(set => ({ count: 0, inc: () => set(s => ({ count: s.count + 1 })) })), used in a component as const count = useStore(s => s.count).
Important pitfall: always use a selector when reading state (useStore(s => s.count) rather than useStore()) to avoid unnecessary re-renders when unrelated parts of state change.

Xem toàn bộ State Management cùng filter theo level & chủ đề con.

Mở danh sách State Management

Zustand là thư viện quản lý state nhỏ gọn cho React, không yêu cầu boilerplate như Redux — không cần actions, reducers, dispatch, hay Provider wrapper.

API chỉ gồm hàm create trả về một hook, state và actions định nghĩa cùng chỗ.
Bundle size ~1KB so với Redux Toolkit ~40KB khi đầy đủ.

Ví dụ tạo store đơn giản: const useStore = create(set => ({ count: 0, inc: () => set(s => ({ count: s.count + 1 })) })), dùng trong component: const count = useStore(s => s.count).

Zustand is a small, lightweight state management library for React that requires no boilerplate like Redux — no actions, reducers, dispatch, or Provider wrapper needed.

The API consists of a single create function that returns a hook, with state and actions defined in the same place.
Bundle size is ~1KB compared to Redux Toolkit at ~40KB fully loaded.
Example of creating a simple store: const useStore = create(set => ({ count: 0, inc: () => set(s => ({ count: s.count + 1 })) })), used in a component as const count = useStore(s => s.count).
Important pitfall: always use a selector when reading state (useStore(s => s.count) rather than useStore()) to avoid unnecessary re-renders when unrelated parts of state change.