React Academy · Lesson

Selectors & Preventing Unnecessary Re-renders

Extract specific state slices via selectors so components only re-render when needed.

Selectors & Preventing Unnecessary Re-renders is a free React Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will use Zustand selectors to subscribe components to only the state slices they need, preventing unnecessary re-renders when other parts of the store change.

The Default Selector Problem

Calling the store hook without a selector returns the entire store object. The component re-renders on EVERY store change, even changes to unrelated state.

// Bad: re-renders on every store change
const store = useAppStore();
return <p>{store.user.name}</p>;

Using a Selector

Pass a selector function to the store hook. The component only re-renders when the selector's return value changes.

// Good: re-renders only when user.name changes
const name = useAppStore(s => s.user.name);
return <p>{name}</p>;

Reference Equality Check

Zustand uses strict equality (===) by default. If your selector returns a new object or array on every call, the component re-renders even when the content is the same.

// Creates a new object every time — always re-renders!
const info = useStore(s => ({ id: s.id, name: s.name }));

Fixing with shallow equality

Import `shallow` from zustand and pass it as the equality function to avoid re-renders when object contents are the same.

import { shallow } from 'zustand/shallow';

const info = useAppStore(
  s => ({ id: s.id, name: s.name }),
  shallow // compare by content, not reference
);

Picking Multiple Values

Use the shallow-equal pattern to select multiple values at once without creating unnecessary re-renders.

const { items, loading } = useCartStore(
  s => ({ items: s.items, loading: s.loading }),
  shallow
);

Stable Action References

Actions (functions) in Zustand have stable references — they do not change when state updates. You can select them without shallow and they will not cause re-renders.

// Actions are always stable — no shallow needed
const addToCart = useCartStore(s => s.addToCart);

useShallow Helper (Zustand v5+)

Zustand v5 provides a useShallow utility that automatically wraps the selector with shallow equality, making the code cleaner.

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

const { items, loading } = useCartStore(
  useShallow(s => ({ items: s.items, loading: s.loading }))
);

Combining Selectors

Derive computed values inside selectors to avoid storing derived state in the store. Compute totals, filtered lists, or formatted strings in the selector.

const totalPrice = useCartStore(
  s => s.items.reduce((sum, item) => sum + item.price, 0)
);

Profiling Zustand Re-renders

Use React DevTools Profiler to verify your selectors work. After adding a non-related item to the store, check that the component using only the name selector does NOT appear in the commit flame graph.

Quick Check

Why do you need to use shallow equality when a Zustand selector returns an object?

Recap

Always use specific selectors. Use shallow equality when selecting multiple values as an object. Derive computed values inside selectors. Actions have stable references and don't need shallow.

Up Next

Next lesson: **Persisting State with the Persist Middleware** — you will sync Zustand state to localStorage using the persist middleware.

Frequently asked questions

Is the “Selectors & Preventing Unnecessary Re-renders” lesson free?

Yes — the full text of “Selectors & Preventing Unnecessary Re-renders” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Selectors & Preventing Unnecessary Re-renders”?

Extract specific state slices via selectors so components only re-render when needed. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Selectors & Preventing Unnecessary Re-renders” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Creating Your First Zustand Store
Selectors & Preventing Unnecessary Re-renders
Persisting State with the Persist Middleware
Zustand DevTools & Testing Stores

← Back to React Academy