How do you prevent unnecessary Redux re-renders?

By default, useSelector re-renders a component whenever the selected value's reference changes between renders (it uses strict === comparison). Most unnecessary re-renders come from selectors that return a new object/array/function on every call, so React-Redux thinks the data changed even though it didn't. Ways to prevent this:

1. Select the smallest piece of state you need instead of the whole slice:

  // BAD: re-renders whenever ANY field in `user` changes
  const user = useSelector((state) => state.user);

  // GOOD: only re-renders when `name` changes
  const name = useSelector((state) => state.user.name);

2. Memoize derived/computed selectors with createSelector (see next question) so a new array/object is only created when its actual inputs change.
3. Use a custom equality function (e.g., shallowEqual from react-redux) when you must select multiple fields as an object:

  import { shallowEqual, useSelector } from "react-redux";

  const { name, email } = useSelector(
    (state) => ({ name: state.user.name, email: state.user.email }),
    shallowEqual
  );

4. Split one large connected component into smaller ones, each with its own narrow useSelector, so a state change only re-renders the component that actually cares about it.
5. Wrap presentational children in React.memo so they skip re-rendering when their own props haven't changed, even if their parent re-renders.