UI freezes when chrome devtools is open about redux-saga HOT 4 OPEN

Hi! I'd be happy to work through this problem with you.

If I open an Incognito tab without plugins the saga does not seem to lock the UI.

This is my first hunch of a potential problem. What extensions do you have installed (e.g. react-devtools and redux-devtools)? It is not uncommon for these tools to lock the UI thread because they are inspecting the react component tree and observing every single redux action being dispatched. I would try uninstalling them one-by-one to see if we can figure out which one is causing the UI lock -- it could be both.

// If a "yield delay(1);" is added here the UI is not locked.

Adding yield delay(1) is really just a way to add this saga into a Macrotask queue in the browser, which could help with UI locking in certain scenarios. This is especially interesting for redux-saga because sagas can and will run synchronously if there are no async operations being called. Feel free to consult our cheatsheet on which operations are blocking.

// This is a pure redux action, only updates the state selectedDates
// Alot of heavy renders are triggered by this, the UI seems to lock until these renders are resolved
yield put(flexHoursActions.setSelectedDates(selectedDates));

I would also investigate this action. Are you certain that no other sagas are being triggered here? It seems you already know that this is causing a lot of rendering, this might be a good place to try to figure out how to optimize performance.

Finally, I would try to monitor performance while this task is running. The "Performance" tab in the Chrome devtools is a great resource for this. It should help you pinpoint what is causing the UI thread to lock.

Hopefully that gives you enough to continue your investigation, good luck, and feel free to keep chatting here!

from redux-saga.

Thank you for your time !

... I would try uninstalling them one-by-one to see if we can figure out which one is causing the UI lock -- it could be both.

I did what you suggested regarding the plugins, the culprit is not a single plugin but an accumulation. The biggest culprit is LastPass for some reason.

Adding yield delay(1) is really just a way to add this saga into a Macrotask queue in the browser, which could help with UI locking in certain scenarios. This is especially interesting for redux-saga because sagas can and will run synchronously if there are no async operations being called.

This goes hand in hand with my current understanding aswell. I think there could be some nuance here which will make me understand the behaviour I'm seeing.

<button 
    onClick={() => {
      console.log("1");
      onClose(); // when state updates: console.log("2");
      console.log("3");
      startSaveSelectedDates(dates);
      console.log("4");
    } 
/>
  
function* startSelectDatesSaga(
  action: ActionType<typeof flexHoursActions.startSelectDates>,
) { 
  console.log("saga 1");
  const { selectedDates } = action.payload;

  yield put(flexHoursActions.setSelectedDates(selectedDates));
  console.log("saga 2");
  
  const {
    employeeHours,
  }: SagaReturnType<typeof actualAPI.getEmployeeHours> = yield call(
    actualAPI.getEmployeeHours,
    {   
      dates: selectedDates,
    },
  );
  console.log("saga 3");
  yield put(employeeHourActions.setEmployeeHours(getEmployeeHours));
  console.log("saga 4");
 }

The console says: 1, 3, saga 1, saga 2, 4, 2, saga 3, saga 4 where saga 2 happens immediatly after saga 1.

In my mind I would expect 1, 2, 3, saga 1, saga 2, 4, saga 3, saga 4

And even with the yield delay(1) the flow looks:
1, 3, 4, 2, saga 1, saga 2, saga 3, saga 4 where I would expect 1, 2, 3, 4, saga 1, saga 2, saga 3, saga 4

I guess why I'm not seeing 1, 2, 3 must be because of how react batches renders together.
And the reason why the UI locks is just because of that, react tryes to render the "is modal open" update together with the big render caused by: yield put(flexHoursActions.setSelectedDates(selectedDates));. And the first time the UI unlocks is when the api call happens, that's why we see this behaviour.

So basically is what I wrote above how it works? If yes, the plugins slows down the rendering so much so that I experience the issue.

Thank you again, sorry if it ended up a bit confusing.

from redux-saga.

In your onClick you are referencing startSaveSelectedDates(dates); which is a saga. Is that actually how you are calling that function? If so then it will not work as expected. You need to dispatch an action that then calls startSaveSelectedDates. This is usually done with a watcher saga that calls takeEvery:

import { takeEvery } from 'redux-saga/effects';

function* watchSelectedDates() {
  yield takeEvery("START_SELECTED_DATES", startSaveSelectedDates);
}

// then in react component
function App() {
  const dispatch = yield* useDispatch();
  const onClick = () => {
    dispatch({ type: "START_SELECTED_DATES", payload: dates });
  }
}

from redux-saga.

Hello again !

the onClick is dispatching an action.
In my watcher function I'm using takeLatest not takeEvery

I'm positive that I do everything correctly regarding how actions are dispatched.
The code in my previous comment is just for explanation.

I bleieve this is just a understanding issue from my part.

from redux-saga.