InterviewHubPRO
Section Overview
Q332

Question 332 of 445

Part 10: Modern React 18, React 19 & Next.js Patterns (317 - 353)

75%
React & Modern Frontend (445 Qs)•Part 10: Modern React 18, React 19 & Next.js Patterns (317 - 353)

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.

javascript
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.