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://imgur.com/a/ZnS0ZlG

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.

CodePudding user response：

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 {/*...*/}
}