How can I restrict createSelector updates to state.entities.activeIds when filtering active entities?

When you include both state slices (items and activeIds) as inputs, reselect will recompute whenever either one changes—even if only non‐active items change. In your case you want the active entities to update only when activeIds change (or when an active entity itself changes).

There are a couple of strategies to achieve this:

---

1. Restructure State / Selector Inputs

If you can restructure your state so that the list of active entities is “isolated” (i.e. stored separately or computed only when one of the active entities updates), your selector can depend solely on that piece of state. For example, if you stored active entities separately then your selector would look like this:

JAVASCRIPTCopied
const selectActiveEntities = state => state.entities.activeEntities;

Now the selector only changes when active entities change.

---

2. Use Custom Memoization (with createSelectorCreator)

If you must derive active entities from a master items map and activeIds, then you can “teach” your selector to ignore changes in items for inactive entities. One approach is to use a custom memoizer that (for example) does a shallow equality check on the resulting array.

For example, using reselect’s createSelectorCreator with a shallow-equality check:

JAVASCRIPTCopied
import { createSelectorCreator, defaultMemoize } from 'reselect';
import shallowEqual from 'shallowequal';

// Create a selector that uses shallow equality check on the result.
const createShallowSelector = createSelectorCreator(
  defaultMemoize,
  shallowEqual
);

const selectActiveEntities = createShallowSelector(
  state => state.entities.activeIds,
  state => state.entities.items,
  (activeIds, items) => activeIds.map(id => items[id])
);

In this version, even if state.entities.items changes in ways that do not affect the active ids, the final output array is compared (using shallowEqual) to the previous one. If nothing “real” changed, then the memoized result is returned and your component won’t re-render.

---

3. Use Keyed or Per‑Item Selectors

Another way is to create a memoized selector per active id. Because reselect memoizes each individual entity’s selector, if a non‐active entity changes its reference the active entity selector will not update. For instance:

JAVASCRIPTCopied
// A selector factory that returns a memoized selector for an entity by id.
const makeSelectEntityById = () => createSelector(
  (state, id) => state.entities.items[id],
  entity => entity
);

// Then, to compose the active entities:
const selectActiveEntities = createSelector(
  state => state.entities.activeIds,
  (state, props) => state,  // just pass state down for convenience
  (activeIds, state) =>
    activeIds.map(id => {
      const selectEntity = makeSelectEntityById();
      return selectEntity(state, id);
    })
);

This approach ensures that unless an active entity itself changes, its memoized selector returns the same reference. (Be mindful that you may need to cache your per‑id selectors for performance.)

---

Conclusion

Because reselect recomputes whenever any of its input selectors return new references, you must either refactor your state so that only the “active” parts are included in the selector’s dependencies or use a custom memoization strategy that “ignores” changes irrelevant to active entities.

Choose the method that best fits your application’s state structure and performance requirements.