flushSync error when trying to setEditorState

[johnbonds]

use-case:
I'm using a read only LexicalComposer (editable: false) to display messages in a list. We have functionality that allows the user to modify the message which would cause this component to re-render/re-initialize.

To facilitate this we created a EditorStatePlugin like so:

function EditorStatePlugin({ lexical }: { lexical: string }) {
    const [editor] = useLexicalComposerContext();
    React.useEffect(() => {
        const editorState = getEditorState(lexical);
        if (editorState) editor.setEditorState(editor.parseEditorState(editorState));
    }, [lexical, editor]);
    return null;
}

This works to modify what's displayed but I'm seeing the following error in Chrome:

Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.

I tried a variety of methods like moving the initial editor state to a useMemo but then the component doesn't update when the lexical changes. Am I doing something wrong?

Thanks in advance for any help!

[svssrinivas]

I fixed the issue by using setTimeout with a timeout value of 0. I figured that we just have to wait till queued tasks by react are done.

Might cause issues with History plugin on initial render.

[irahopkinson]

I was able to fix this by doing what the error message suggested - i.e. wrapping editor.setEditorState(...) in queueMicrotask(), e.g.

React.useEffect(() => {
  const serializedEditorState = getEditorState(lexical);
  const editorState = editor.parseEditorState(serializedEditorState);
  queueMicrotask(() => {
    editor.setEditorState(editorState);
  });
}, [lexical, editor]);

However, I too wonder if this is a great idea or not in React.