Which of the following is NOT a problem that Zustand solves?

Zustand does not provide built-in type safety; TypeScript must be configured separately. It does eliminate prop drilling, Context API re-renders, and boilerplate.

What is the primary advantage of Zustand over Redux?

Zustand's core advantage is minimal boilerplate—no actions, reducers, or Provider wrapping. It is simpler to set up and reason about.

Can Zustand stores be accessed outside React components?

Zustand stores are plain JavaScript objects. Use `getState()` or `subscribe()` outside React—no hooks required.

What does a Zustand store's `set` function do?

`set` merges the provided object into current state and triggers re-renders in subscribing components.

What is the primary downside of a denormalized store shape?

Denormalized stores embed entities in multiple places. If Alice's profile appears in two posts and you update one, the other becomes stale.

In a normalized store, what is the purpose of the `allIds` array?

`allIds` preserves insertion order. Without it, you'd have to iterate over object keys, which may not be in order.

What is the lookup time complexity for finding an entity by ID in a normalized store using `byId`?

JavaScript object property access is O(1), so `state.posts.byId[postId]` is instant regardless of store size.

When should you choose a denormalized store shape despite duplication risks?

Denormalization may be acceptable for read-heavy, low-update scenarios where displaying data as-received is simpler.

What is the main benefit of the slice pattern in Zustand?

Slices organize state and actions by domain (auth, cart, ui), making large stores manageable and testable.

How do you call an action from one slice inside another slice?

Each slice receives `get()` callback. Use `get().logout()` to call another slice's action from within logout logic.

What parameters does a slice factory function receive?

Slice factories are called with `(set, get)` callbacks, identical to the main `create()` function signature.

When combining multiple slices with `create((set, get) => ({ ...slice1(), ...slice2() }))`, what happens if two slices define the same property name?

Object spread is left-to-right; later slices overwrite earlier ones. Avoid naming conflicts via clear domain prefixes.

In Zustand, what triggers a component re-render?

Zustand compares the selector's previous and current return values. If they're equal, no re-render occurs.

Why does this selector cause unnecessary re-renders? ```js const { user, theme } = useStore((state) => ({ user: state.user, theme: state.theme })) ```

New object literal `{}` is created on every render. Previous and current references differ, so component re-renders even if user/theme unchanged. Fix: use `useShallow`.

What does `useShallow` do?

`useShallow` shallow-compares returned objects. If properties haven't changed, component doesn't re-render.

How do you subscribe to store changes outside React?

`useStore.subscribe()` takes a selector and callback. Called when selector output changes. Unsubscribe by calling returned function.

When should you use `getState()` instead of a selector?

`getState()` retrieves a snapshot without subscribing. Use in handlers/callbacks where subscription is unnecessary.

What is a selector factory pattern?

Example: `const selectPostById = (id) => (state) => state.posts.byId[id]`. Now each post ID has its own subscription.

How do you memoize an expensive selector computation?

Use `useMemo(() => cartItems.filter(item => item.price > 100), [cartItems])` to avoid recalculating on every render.

In a news feed design, why should posts be stored in a normalized `byId` structure?

Normalized byId allows individual PostCard components to subscribe only to their own post. Liking post 5 doesn't re-render post 3.

What is optimistic update and why is it useful in a feed?

Optimistic like: increment count, send request, revert if it fails. User sees instant feedback instead of waiting for server.

How do you handle a new post arriving via WebSocket in a normalized feed store?

Call `prependPost()` to add new post's ID to front of list and store its data in byId. Feed updates instantly without refetch.

What state properties are needed to handle infinite scroll pagination?

Track page/cursor, loading state, and hasMore flag. These control when to load next page and show load-more button.

In the news feed example, how does the `likePost` action handle errors?

Optimistic revert: backup original post, update immediately, catch error and restore original. Prevents stale UI state.

Why separate `users` and `comments` into their own normalized tables in a feed store?

If Alice appears in 10 posts' author fields, normalize to users.byId[42]. Update once, reflected everywhere.

State Management with Zustand — System Design Concept

Before diving into advanced topics, let's understand the problem Zustand solves.

In React, sharing state between components that aren't directly related is painful. You either "prop drill" data down many layers, or you use the Context API — which re-renders every subscriber whenever anything changes. Zustand provides a global store that is:

Minimal: No actions, no reducers, no providers required
Selective: Components only re-render when the specific piece of state they use changes
Flexible: Works outside React too (in utility functions, event listeners, etc.)

# Install Zustand
npm install zustand

**A minimal Zustand store:**

```js
import { create } from 'zustand'

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

// In a component:
function Counter() {
  const count = useCounterStore((state) => state.count)
  const increment = useCounterStore((state) => state.increment)

  return <button onClick={increment}>Count: {count}</button>
}

That's it. No Provider wrapping, no dispatch, no action types.

---