Stores

Zustand Stores

Overview

Stores are for UI state only. Do not use stores for server data (use React Query instead).

Location

All stores go in src/stores/. Export from src/stores/index.ts.

UI Store

The main UI store (src/stores/ui.ts) provides common UI states:

import { useUIStore } from "@/stores";

// Modal
const { isModalOpen, openModal, closeModal, toggleModal } = useUIStore();

// Sidebar
const { isSidebarOpen, openSidebar, closeSidebar, toggleSidebar } = useUIStore();

// Loading
const { isLoading, setLoading } = useUIStore();

// Generic toggles
const { toggles, setToggle, getToggle, toggle } = useUIStore();

Usage Examples

Modal State

import { useUIStore } from "@/stores";

export default function MyComponent() {
  const { isModalOpen, openModal, closeModal } = useUIStore();

  return (
    <div>
      <button Modal</button>
      {isModalOpen && (
        <Modal
          <p>Modal content</p>
        </Modal>
      )}
    </div>
  );
}

Generic Toggles

import { useUIStore } from "@/stores";

export default function MyComponent() {
  const { getToggle, toggle } = useUIStore();

  const isMenuOpen = getToggle("menu");

  return (
    <button => toggle("menu")}>
      {isMenuOpen ? "Close" : "Open"} Menu
    </button>
  );
}

With Selectors (Performance)

import { useUIStore } from "@/stores";

// Only re-render when isModalOpen changes
const isModalOpen = useUIStore((state) => state.isModalOpen);
const openModal = useUIStore((state) => state.openModal);

Creating New Stores

For new UI stores, follow this pattern:

// src/stores/my-store.ts
import { create } from "zustand";

interface MyState {
  value: boolean;
  setValue: (value: boolean) => void;
  toggle: () => void;
}

export const useMyStore = create<MyState>((set) => ({
  value: false,
  setValue: (value) => set({ value }),
  toggle: () => set((state) => ({ value: !state.value })),
}));

Then export from src/stores/index.ts:

export { useUIStore } from "./ui";
export { useMyStore } from "./my-store";

Important Notes

• UI state only - Do not use for server data
• Use selectors - Select only needed state to avoid unnecessary re-renders
• Export from index.ts - Import from @/stores
• Avoid any type - Define proper interfaces for state
• Keep stores small - One store per domain/feature

Converted and distributed by TomeVault — claim your Tome and manage your conversions.