CODEWITHSUNDEEP
performancereduxreact-reduxgoogle-chrome-devtools
Gabriel
Gabriel

Reputation: 23

Redux dispatch action taking too long despite reducer function attached executes fast

I am getting chrome violation errors of type setTimeout handler took 500+ ms which are seriously blocking my app, and some happen every time an action attached to a websocket payload comes and is processed. I tried debugging it with the chrome profiler, and this is what it shows exactly at the point when payload is processed.

https://i.sstatic.net/CdP7X.jpg

The (anonymous) function is the one in the reducer and the time ran coincides with the error.

Here is some code.

// ACTION
const someAction = (data): Thunk => async dispatch => {
  try {
    const t = performance.now();
    dispatch(someAction(data));
    console.log('after dispatching cellReceived', performance.now() - t); 
    // logs 800+ ms and is consistent with chrome violation errors (setTimeout handler took <N> ms
  }
}

// REDUCER
  export default(state: State, action: Actions) {
  switch(action.type) {
    ...
    case ActionType.someAction: {
      const { data } = action.payload;
      const t = performance.now();
      (... do calculations here)
      console.log(performance.now() - t) // logs 30ms
    }
  }
}

I would greatly appreciate any help, I must have spent over 20 hours this week reading about this issue and trying to debug it. I didn't find any good resources on how to properly debug with chrome's profiler.

Upvotes: 0

Views: 2188

Answers (1)

phry
phry

Reputation: 44086

It doesn't actually need to be the dispatch or reducer. Under certain circumstances, React will start a rerender synchronously, as a direct result of the dispatch - so before your console.log('after dispatching cellReceived', performance.now() - t); line

So this could also be a very slow React render.

If you want to make sure:

import { batch } from 'react-redux'

const someAction = (data): Thunk => async dispatch => {
  try {
    batch(() => {
        const t = performance.now();
        dispatch(someAction(data));
        console.log('after dispatching cellReceived', performance.now() - t); 
    })
  } catch {/*...*/}
}

Upvotes: 2

Related Questions