Code Quiz

Zustand Selector Causing Re-renders

Spot the state-selection bug that makes a React Navigation screen re-render on every store update.

Codetypescript

import { create } from 'zustand';

const useStore = create((set) => ({
  user: null,
  cart: [],
  addItem: (item) => set((s) => ({ cart: [...s.cart, item] })),
  setUser: (user) => set({ user }),
}));

function CartBadge() {
  // We only care about the cart count here
  const { cart } = useStore((state) => ({ cart: state.cart }));
  return <Text>{cart.length}</Text>;
}

Why does CartBadge re-render even when only `user` changes in the store?

Next →State Ownership & Navigation in SwiftUI