Slow update of the Draft.js / react-draft-wysiwyg DOM when content change

Question

I'm using react-draft-wysiwyg wrapper for Draft.js. On the page I have multiple instances of the Editor component. I have problem with slowly/laggy update of the Editor UI (onChange event handler). Maybe this is some hint Im getting a lot of warning in the console [Violation] 'input' handler took <N>msA.

My setup is:

• react-boilerplate
• react-draft-wysiwyg
• redux
• redux-saga
• reselect

Im dispatching action to handle editor state change its handled by redux-saga. Saga will check if new content and update the store.

export function* handleOnEditorStateChange({ editorState, nameSpace }) {
  const actualEditorState = yield select(selectAllEditorsContent());
  const editorIndexToUpdate = actualEditorState.findIndex(
    editors => editors.name === nameSpace,
  );
  const currentContent = actualEditorState[
    editorIndexToUpdate
  ].state.getCurrentContent();
  const newContent = editorState.getCurrentContent();

  const hasEditorNewContent = newContent !== currentContent;

  if (hasEditorNewContent) {
    const updatedEditorState = [...actualEditorState];
    updatedEditorState[editorIndexToUpdate].state = editorState;

    yield put(storeEditorStateAction(updatedEditorState));
  }
}

My redux state looks like that:

...
editors: [
    {
      name: 'editor1',
      label: 'Editor 1',
      state: {... _immutable - draftjs }
    },
    {
      name: 'editor2',
      label: 'Editor 2',
      state: {... _immutable - draftjs }
    },
]
...

Reducer:

...
    case STORE_EDITOR_STATE: {
      const { content } = action;
      return state.set('editors', content);
    }
...

Answer 1

I found the solution for my problem. At least some walk around. I have changed the way I'm handling action in my action watcher saga. Instead of takaLates effect I changed to throttle with a small delay. And it's much much better.