0

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

shahar taite
  • 462
  • 6
  • 11
  • you might look into currying. this would allow you maintain some level of caching when other parameters are not changed, and require computation only when the relevant parameter changes (see https://medium.com/@kbrainwave/currying-in-javascript-ce6da2d324fe) – sfletche Jun 13 '17 at 03:44
  • same requirement I have. Were you able to find a solution for this? – Stanly Sep 10 '20 at 15:43

1 Answers1

1

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.

Toni Vanhala
  • 1,352
  • 6
  • 16
  • 1
    i do use the selector across multiple components. Also worth mentioning is i have multiple levels of selectors one on top of the other. so i'm guessing some input-selector is changing nonetheless. could it be that having input-selectors being "createSelector" selectors themselves is causing the deepest selector get a different function as input-selector every time? – shahar taite Jun 13 '17 at 10:25
  • @shahartaite I was having the same situation - upper components had one state returning, and below components different – Mihey Mik Aug 23 '21 at 15:18