Zustand: Store Architecture & Fine-Grained Subscriptions

1import { create } from 'zustand';
2import { useShallow } from 'zustand/react/shallow';
3
4interface UserStore {
5  username: string;
6  theme: 'light' | 'dark';
7  notificationsCount: number;
8  setUsername: (name: string) => void;
9  incrementNotifications: () => void;
10}
11
12// 1. Create external store outside React tree
13export const useUserStore = create<UserStore>((set) => ({
14  username: 'Alice',
15  theme: 'dark',
16  notificationsCount: 0,
17  setUsername: (username) => set({ username }),
18  incrementNotifications: () =>
19    set((state) => ({ notificationsCount: state.notificationsCount + 1 })),
20}));
21
22// 2. Component A: Subscribes ONLY to username
23// Re-renders ONLY when username changes; NOT when notificationsCount increments!
24export function UserProfileHeader() {
25  const username = useUserStore((state) => state.username);
26  return <h1>Welcome back, {username}</h1>;
27}
28
29// 3. Component B: Subscribes to multiple properties using useShallow
30export function NotificationBadge() {
31  const { count, increment } = useUserStore(
32    useShallow((state) => ({
33      count: state.notificationsCount,
34      increment: state.incrementNotifications,
35    }))
36  );
37
38  return <button onClick={increment}>Alerts: {count}</button>;
39}
40
41// 4. Non-reactive read outside React (e.g. in an API interceptor)
42export function getAuthTokenOrUser() {
43  return useUserStore.getState().username;
44}