debugging stopped at React-Redux Connect periodically

Question

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?

Answer 1

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.