Mô hình atomic state (Jotai, Recoil) xây global state từ nhiều đơn vị nhỏ, độc lập gọi là atom, kết hợp từ dưới lên (bottom-up) — thay vì một store lớn từ trên xuống (Redux) hay một context khổng lồ. Component subscribe vào các atom riêng lẻ và chỉ re-render khi những atom đó thay đổi.
{ atom, useAtom } ;
countAtom = ();
nameAtom = ();
Mỗi atom là một mẩu state độc lập. Bạn tạo bao nhiêu tùy nhu cầu, mỗi cái có thể được địa chỉ hóa riêng.
// một derived atom tính từ các atom khác; tính lại khi dependency của nó thay đổi
const doubleAtom = atom((get) => get(countAtom) * 2);
const greetingAtom = atom((get) => `Hello, ${get(nameAtom)}`);
// writable derived atom
const upperNameAtom = atom(
(get) => get(nameAtom).toUpperCase(),
(get, set, newVal) => set(nameAtom, newVal.toLowerCase()),
);
Các atom kết hợp thành một đồ thị dependency — các derived atom tự động cập nhật khi các atom chúng đọc thay đổi, giống như một bảng tính (spreadsheet).
function Counter() {
const [count, setCount] = useAtom(countAtom); // global, nhưng API kiểu useState
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
function Display() {
const [double] = useAtom(doubleAtom); // chỉ re-render khi doubleAtom thay đổi
}
Redux (top-down): một cây state lớn; bạn cắt slice/selector RA khỏi nó
Atomic (bottom-up): bắt đầu với các atom nhỏ; kết hợp chúng LÊN thành derived state
Độ mịn: mỗi atom có thể subscribe độc lập → re-render mịn một cách tự nhiên
(một component dùng countAtom bỏ qua các thay đổi của nameAtom)
✓ Re-render mịn theo mặc định (subscribe đúng các atom bạn dùng)
✓ Không boilerplate selector; derived state chỉ là một atom khác
✓ Giải quyết vấn đề "re-render mọi thứ" của Context
✓ Tuyệt cho state được phân rã tự nhiên thành nhiều mảnh độc lập
✗ Nhiều atom có thể khó tổ chức/truy vết hơn một store tập trung
✗ Cấu trúc kém cứng nhắc hơn Redux (lợi hay hại tùy team)
Mô hình atomic là một cách tiếp cận riêng biệt, ngày càng phổ biến cho global state, đảo ngược cấu trúc top-down của Redux: thay vì cắt một store lớn, bạn kết hợp các atom nhỏ lên trên.
Độ mịn tích hợp sẵn của nó cho re-render hiệu quả, có mục tiêu mà không cần selector — giải quyết trực tiếp các vấn đề hiệu năng của Context.
Hiểu atom (và derived atom) hoàn thiện kiến thức của bạn về không gian thiết kế state-management, bên cạnh các mô hình single-store (Redux/Zustand) và reactive (MobX/Signals), giúp bạn chọn mô hình (paradigm) phù hợp nhất với hình dạng state của một app.