Selector recomputation in createSelector with OnPush change detection

Direct Answer

Use memoizeOptions with a shallow equality function that compares only the specific state slice your selector consumes, not the entire state tree. For stable references, structure normalized state so entity objects are reused across updates—only replace the entity map key when that entity's data actually changes.

Implementing memoizeOptions for Balanced Performance

The default createSelector memoization uses strict === on input arguments. When reducers return new object references (even with identical data), selectors recompute and OnPush components re-render. memoizeOptions (NgRx v12+) accepts a custom equalityCheck function.

Recommended Pattern: Shallow Slice Comparison

import { createSelector, MemoizedSelector } from '@ngrx/store';

const selectUserSlice = (state: AppState) => state.users;

const selectActiveUser = createSelector(
  selectUserSlice,
  (users) => users.entities[users.activeId],
  {
    memoizeOptions: {
      equalityCheck: (a, b) => a === b || (
        a?.id === b?.id &&
        a?.version === b?.version
      )
    }
  }
);

This compares only the fields that matter (id and version) rather than deep-cloning or full object traversal. The overhead is O(1) per selector invocation versus O(n) for deep equality.

When to Use Deep Equality

• Only when the selector output is an array or object that downstream components OnPush compare by reference
• When you cannot control reducer reference stability (legacy code, third-party reducers)
• Profile first: wrap the equality function with console.count or Chrome DevTools to measure invocation frequency before adding overhead

Stable References in Normalized State

The most effective strategy avoids custom equality entirely by keeping entity references stable across updates.

Normalized State Structure

interface UsersState {
  ids: string[];
  entities: { [id: string]: User };
  activeId: string | null;
}

Reducer Pattern for Reference Stability

on(UsersActions.updateUser, (state, { user }) => {
  const existing = state.entities[user.id];
  // Only create new reference if data actually changed
  if (existing && shallowEqual(existing, user)) {
    return state; // Return SAME state reference
  }
  return {
    ...state,
    entities: {
      ...state.entities,
      [user.id]: user // New reference only for changed entity
    }
  };
});

Use a lightweight shallowEqual helper (comparing own enumerable properties) in the reducer itself. This keeps the entities map reference stable when unchanged, and only the modified entity gets a new reference. Selectors reading entities[id] then hit memoization naturally.

Verification Steps

1. Add console.log or a counter inside your selector's projector function
2. Trigger an action that updates unrelated state
3. Confirm selector does not re-execute (counter unchanged)
4. Trigger an action that updates the target entity
5. Confirm selector executes once with new data

One Diagnostic Detail Needed

What does your current reducer return when an entity update payload matches existing data? If it returns { ...state, entities: { ...state.entities, [id]: payload } } unconditionally, that's the root cause—fix the reducer first before adding memoizeOptions.