CODEWITHSUNDEEP
javascriptreactjsreduxreselect
shahar taite
shahar taite

Reputation: 472

Multiple components using the same selector, reselect

I am using the reselect library. i have a lot of components which are each connected (in their stateProps) to a certain selector(implemented with reselect, lets refer to it as selector A). every time one of selector A's params(also selectors lets refer to as B, C, D) changes, selector A recalculates and is invoked separately for each connected component. as this calculation is intensive this costs me a lot in performance. is there a way to avoid this and calculate once for all? thanks

Upvotes: 0

Views: 1136

Answers (1)

Toni Vanhala
Toni Vanhala

Reputation: 1372

The reselect library implements memoization for the selectors. Selectors created with the createSelector function are recalculated only when the input values to the selector change. Otherwise, the selector returns its previous memoized value - across components. From reselect documentation:

If the values of the input-selectors are the same as the previous call to the selector, it will return the previously computed value instead of calling the transform function.

This requires that you reuse the same selector function across components. Typically you create the selectors along with reducers (e.g., in reducers.js) which build the state you are selecting. You should also compose selectors for extra smartness, so that also substate shared across different selectors can be memoized.

Upvotes: 1

Related Questions