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);
         

1. Memoize derived/computed selectors with createSelector (see next question) so a new array/object is only created when its actual inputs change.
2. 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
         );
         

1. 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.
2. Wrap presentational children in React.memo so they skip re-rendering when their own props haven't changed, even if their parent re-renders.