Zustand Interview Questions — Medium

Answer: Zustand features a highly extensible middleware pattern. Under the hood, a middleware in Zustand is simply a higher-order function that wraps the store creator function, intercepts calls to set and get, and adds custom behaviors before passing execution along.

1. devtools Middleware

• Purpose: Connects your Zustand store to the Redux DevTools browser extension. This allows you to inspect state history, perform time-travel debugging, and audit action dispatches visually.
• Usage: Wrap your store initializer inside devtools().

2. persist Middleware

• Purpose: Automatically serializes and synchronizes your store state to a persistent browser storage medium (e.g., localStorage, sessionStorage, or IndexedDB).
• Usage: Takes your store creator and an configuration options object (specifying unique storage keys, custom storage backends, or state filters).

Syntactic Integration:

import { create } from 'zustand';
import { persist, devtools } from 'zustand/middleware';

export const useUserStore = create(
  devtools(
    persist(
      (set) => ({
        user: null,
        login: (userData) => set({ user: userData }),
      }),
      { name: 'user-session' } // Unique storage key
    )
  )
);

---

Answer: Unlike Redux, which requires you to install separate middleware (like redux-thunk or redux-sagas) to handle asynchronous dispatches, Zustand handles async actions natively.

Because actions in Zustand are plain JavaScript functions, they can be declared as async and perform operations like database queries or fetch requests directly. When the async operation returns, you simply call the synchronous set function to apply the updates to the store.

export const useUserStore = create((set) => ({
  userData: null,
  loading: false,
  error: null,

  fetchUser: async (userId) => {
    set({ loading: true, error: null });
    try {
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      set({ userData: data, loading: false }); // Synchronously apply state update
    } catch (err) {
      set({ error: err.message, loading: false });
    }
  }
}));

There is no concept of complex action creators, dispatch payloads, or reducers; you write standard asynchronous JavaScript.

---

Answer: By default, when a component consumes a store using a selector, Zustand compares the return value of that selector to its previous value on every state change using strict reference equality (===).

// This triggers a re-render ONLY if 'username' string changes
const username = useUserStore((state) => state.username);

The Object Reference Problem: If your selector returns an object literal or a newly filtered array, a new reference is created on every single render:

// DANGER: Returns a new object reference every time any state property changes!
const { name, email } = useUserStore((state) => ({ name: state.name, email: state.email }));

Because { name, email } !== { name, email } (reference inequality), this component will re-render on every store update, even if both name and email didn't change!

The Solution: useShallow To prevent this, wrap your selector function in the useShallow hook. This tells Zustand to compare the selected value using shallow comparison (comparing individual object key values) instead of raw reference matching.

import { useShallow } from 'zustand/react/shallow';

// OPTIMIZED: Will only re-render if state.name or state.email actually change values
const { name, email } = useUserStore(
  useShallow((state) => ({ name: state.name, email: state.email }))
);

---

Answer: As an application scales, housing all properties inside a single flat store becomes unmanageable. Zustand solves this using the Slice Pattern, allowing you to split your state and actions into domain-specific modules (slices) and combine them into a single global store.

Rules for Slices:

1. A slice is a function that returns an object representing that slice's state.
2. It receives set, get, api, and optional middlewares as parameters.
3. Slices are merged together by passing them into a single parent create function.

Slice Pattern Code Sample:

// 1. Define the User Slice
const createUserSlice = (set, get) => ({
  userName: 'Guest',
  setUserName: (name) => set({ userName: name }),
});

// 2. Define the Settings Slice
const createSettingsSlice = (set, get) => ({
  darkMode: false,
  toggleMode: () => set((state) => ({ darkMode: !state.darkMode })),
});

// 3. Combine Slices into a Single Unified Store
export const useBoundStore = create((...args) => ({
  ...createUserSlice(...args),
  ...createSettingsSlice(...args),
}));

Inside components, you import useBoundStore and call selectors on the specific slice fields you need.

---

Answer: If you have split your application into multiple separate stores (e.g., a useAuthStore and a useTaskStore), you can easily read or write state from one store to another.

Because Zustand stores are exposed as standard objects, you can call .getState() or .setState() on any store instance directly inside another store's action definitions:

import { useAuthStore } from './authStore';

export const useTaskStore = create((set) => ({
  tasks: [],
  
  createTask: (title) => {
    // Read user token directly from another store instance synchronously
    const token = useAuthStore.getState().token;

    if (!token) {
      throw new Error("Unauthorized task creation attempt.");
    }

    // Proceed to create task...
  }
}));

This makes store-to-store communication clean and direct, without requiring React Context providers or parent component mediators.

---