React-redux reselect performance

performance, react-redux, reactjs, redux, reselect

Solution

As toomuchdesign has already stated. If there genuinely is no calculations/logic and the selector simply returns a reference to an object or to a value that exists somewhere in the state tree. Then there is no need for memoized selector as a shallow equality check will be done by `connect`.

Therefore, when deciding whether to use a plain selector or use `createSelector` A good question to ask is: Will the reference of this object, array or function that is returned by the selector be different each time it is executed?

Contrived example:

const getSelectedItems = state => state.items.filter(i => i.selected)

Would result in a different array each time the selector is called.

Whereas:

const getFullName = createSelector(
  state => state.items,
  items => items.filter(i => i.selected)
)

Would only return a new array if the `items` array changed.

So while it might be tempting to look at the complexity of the selectors computation as the basis of the decision, the caching of references is a key factor in enabling the performance benefits of `reselect` as it will result in less unnecessary renders. So while the memoization of a selector itself can bring performance benefits. Don't forget the performance benefits that caching the reference itself can bring.

Problem

I have a question regarding performance while using reselect in a react redux application. The Reselect library is used as a memoization layer to cache calculations that are made for performance, but what if you do not need any calculations/logic done? Is it more performant to use a selector for a single piece of data or should I just be using the standard connect method instead?

Original source