React-redux reselect performance

Question

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?

Answer 1

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.