Avoiding Selector Recomputations with Non-Primitive Arguments

Use createSelector to correctly memoize selectors when dealing with non-primitive arguments, preventing unnecessary recomputations.
import { createSelector } from 'reselect';

// A state selector to get categories map
const selectCategoriesMap = state => state.categoriesMap;

// A selector to get items by category ID
const makeSelectItemsByCategoryId = () => createSelector(
  (categoriesMap) => categoryId => categoriesMap[categoryId] || []
Creates a memoized selector factory function to select items by category ID. It takes advantage of closure to keep the categoryId parameter stable, preventing unnecessary recomputations when passing non-primitive arguments.
const selectItemsByCategoryId = makeSelectItemsByCategoryId();

// Later in your code, such as in mapStateToProps or a useSelector hook
const mapStateToProps = (state, ownProps) => ({
  items: selectItemsByCategoryId(state)(ownProps.categoryId)
Utilizes the previously created selector factory and provides a stable reference to the categoryId, allowing for correct memoization and avoiding recomputations when the categoryId remains the same.