Selectors and Optimizing Renders

What Are Selectors?

In Zustand, a selector is the function you pass into your store hook to extract part of the state.

const bears = useBearStore((state) => state.bears);

This is efficient because Zustand will only re-render this component if state.bears changes.

---

Why Selectors Improve Performance

Using selectors:

• Prevents subscribing to the entire store
• Minimizes re-renders
• Keeps components lean and reactive

---

Shallow Comparison and Object Selectors

If you want to select multiple values, Zustand will trigger re-renders unless you optimize it with a shallow comparison.

import { shallow } from 'zustand/shallow';

const { bears, increase } = useBearStore(
  (state) => ({ bears: state.bears, increase: state.increase }),
  shallow
);

This avoids re-renders if neither bears nor increase has changed.

---

Using Zustand’s shallow Helper

Zustand exports a built-in shallow function. Use it when:

• You return an object or array in your selector
• You want to skip unnecessary re-renders when values are stable

import { shallow } from 'zustand/shallow';

---

Common Anti-Patterns to Avoid

❌ Don’t destructure the entire store:

const { bears, increase } = useBearStore(); // BAD

✅ Use individual selectors:

const bears = useBearStore((s) => s.bears);
const increase = useBearStore((s) => s.increase);

---

Summary

• Selectors make Zustand performant and reactive
• Always select only what you need
• Use shallow when selecting multiple values
• Avoid full destructuring unless you know what you’re doing

---

Next: Lesson 05 – Handling Booleans, Counters, and Simple Objects