What is createSelector?
createSelector (from Reselect, which Redux Toolkit re-exports) creates memoized selectors. It takes one or more "input selectors" and a "result function", and only recomputes the result when the outputs of the input selectors change — otherwise it returns the previously cached value.
import { createSelector } from "@reduxjs/toolkit";
const selectItems = (state) => state.cart.items;
// Recomputes total only when `items` reference actually changes
const selectTotal = createSelector([selectItems], (items) =>
items.reduce((sum, item) => sum + item.price * item.qty, 0)
);
function Cart() {
const total = useSelector(selectTotal);
// ...
}
Without memoization, computing total inline inside useSelector would return a brand-new number/object on every dispatch, which is fine for primitives but becomes a real problem when deriving arrays/objects (e.g., filtering or sorting a list), since a new reference on every render defeats React.memo/useSelector's equality check and causes unnecessary re-renders.