Storing User Preferences and Settings

What Are User Preferences?

User preferences include:

• Dark/light mode
• Language or locale
• Sidebar layout
• Grid or list view
• Font size or accessibility options

These are often user-specific and should be persisted across sessions.

---

Structuring a Settings Store

import { create } from "zustand";
import { persist } from "zustand/middleware";

type SettingsStore = {
  darkMode: boolean;
  language: "en" | "he";
  toggleDarkMode: () => void;
  setLanguage: (lang: "en" | "he") => void;
};

export const useSettingsStore = create<settingsstore>()(
  persist(
    (set) =&gt; ({
      darkMode: false,
      language: "en",
      toggleDarkMode: () =&gt; set((s) =&gt; ({ darkMode: !s.darkMode })),
      setLanguage: (lang) =&gt; set({ language: lang }),
    }),
    {
      name: "user-settings", // Key in localStorage
    }
  )
);

---

Persisting Preferences Across Sessions

Zustand’s persist middleware stores preferences in localStorage:

persist(..., { name: "user-settings" })

✅ Values persist on page reload
✅ Can also use sessionStorage or cookies

---

Syncing Preferences on Login

If your backend saves user preferences:

// after login:
const serverSettings = await api.getUserPreferences();
useSettingsStore.setState(serverSettings);

This syncs server-stored settings into your local store.

You can also POST to save changes:

useEffect(() => {
  const settings = useSettingsStore.getState();
  api.saveUserPreferences(settings);
}, [language, darkMode]);

---

Tips for Multi-User or Multi-Device Support

• Use a unique key per user if storing locally
• Sync preferences after login/logout
• Consider using a centralized API if preferences are shared between devices

persist(..., { name: `settings-${userId}` });

---

Summary

• Use Zustand to manage app-wide user settings
• Persist settings using middleware
• Load or overwrite preferences from a backend
• Customize per-user storage keys if needed

---

Next: Lesson 25 – Migrating from Redux or Context to Zustand