1

I have been using React-Redux for a while but I always have a question while debugging the "connect" which interact between component and store, for example

ln    export default connect((state) => {
112     return {
113       isUserAdmin: isUserAdmin(state)
114     };
115   })(MainPage);

      isUserAdmin(state) {
222       // perform a heavy task...
      }

if I put a breakpoint at line 113, even if I didn't make any change in my component, I found that it's being triggered periodically every 1 seconds, as well as my function isUserAdmin(state) is being executed again and again and never stopped, is that something designed by react-redux?

I also found in my call stack there is some Subscription which triggered the connect(mapStateToProps), does it mean behind the scene react-redux is using some kind of subscription or promise to perform a polling to maintain the state?

BTW, if my isUserAdmin is doing a heavy job or I pass additional mapStateToProps through executing additional methods, would that impact a lot in my application performance since it seems running infinitely behind the scene?

Drex
  • 3,346
  • 9
  • 33
  • 58

1 Answers1

2

even if I didn't make any change in my component, I found that it's being triggered periodically every 1 seconds.

  • It has no business with the changes (local component state updates) you do in your component (Unless you are doing any store updates by dispatching actions). It only listen to store updates.
  • First time it triggers with the default redux store state upon application loading. The subsequent triggers depends on the store updates you are doing in your application/components by dispatching actions.

does it mean behind the scene react-redux is using some kind of subscription or promise to perform a polling to maintain the state?

  • Yes. It subscribes to store updates. Things are well explained here.

if my isUserAdmin is doing a heavy job or I pass additional mapStateToProps through executing additional methods, would that impact a lot in my application performance.

  • React will come as a savior for you here. UI/Component won't re-render if the state/reference is not changed.

I would recommend you to move isUserAdmin logic to react component and use useMemo() hook to get performance optimization for intense calculations. For your reference.

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
Prathap Reddy
  • 1,688
  • 2
  • 6
  • 18
  • Thank you! Yeah looks like there is a dispatch out of my current component, that `somehow` triggers the dispatch of my component... Regarding my third question (if my isUserAdmin is doing a heavy job), yes my state or my UI/component did not change, my concern is the method `isUserAdmin` still will be executing right? Suppose it would take 2 second for executing the `isUserAdmin`, does that mean each time an outside dispatch will trigger the `isUserAdmin` that would take 2 second to complete? – Drex Jul 13 '20 at 14:49
  • 1
    Yes. It would execute everytime and takes those 2 seconds. Move the `isUserAdmin` to component and wrap it with `useMemo()` as suggested in answer or use libraries like [memoize-one](https://github.com/alexreardon/memoize-one) for performance optimization. It skips the execution if the input arguments are same in subsequent calls and save those 2 seconds for you in both the cases (`useMemo()`/`memoize-one`). – Prathap Reddy Jul 13 '20 at 15:05