Zustand for App-Wide UI State (Modals, Sidebars, Themes)

Why UI State Belongs in Zustand

Zustand is great for global UI state because:

• 📦 No Provider is needed
• 🎯 Easy to share state across layout and nested components
• 💡 Works well with modals, sidebars, themes, tooltips, etc.

---

Managing Modals Globally

type ModalStore = {
  isOpen: boolean;
  openModal: () => void;
  closeModal: () => void;
};

export const useModalStore = create<modalstore>((set) =&gt; ({
  isOpen: false,
  openModal: () =&gt; set({ isOpen: true }),
  closeModal: () =&gt; set({ isOpen: false }),
}));

In your modal component:

const isOpen = useModalStore((s) => s.isOpen);
const closeModal = useModalStore((s) => s.closeModal);

{
  isOpen &amp;&amp; <modal onclose="{closeModal}"></modal>;
}

Trigger globally:

useModalStore.getState().openModal();

---

Sidebar and Drawer State

type SidebarStore = {
  visible: boolean;
  toggle: () => void;
};

export const useSidebarStore = create<sidebarstore>((set) =&gt; ({
  visible: false,
  toggle: () =&gt; set((s) =&gt; ({ visible: !s.visible })),
}));

Works with a layout component or navbar button.

---

Theme Toggle and Dark Mode

type ThemeStore = {
  darkMode: boolean;
  toggleTheme: () => void;
};

export const useThemeStore = create<themestore>((set) =&gt; ({
  darkMode: false,
  toggleTheme: () =&gt; set((s) =&gt; ({ darkMode: !s.darkMode })),
}));

Update document.body.classList in useEffect:

const darkMode = useThemeStore((s) => s.darkMode);

useEffect(() => {
  document.body.classList.toggle("dark", darkMode);
}, [darkMode]);

---

Best Practices for Global UI Stores

✅ One store per feature (e.g., useModalStore, useThemeStore)
✅ Avoid overloading one giant store with all UI
✅ Persist theme preference if needed
✅ Don’t use Zustand for transient component-local UI

---

Summary

• Zustand is perfect for modals, sidebars, and themes
• Share state between layout and deeply nested components
• Keep stores focused and isolated by UI concern
• Avoid context hell for simple UI toggles

---

Next: Lesson 22 – Combining Zustand with React Query for Async Data