Editor JS, React and Content Streaming: Rendering content causes flickering on the UI

[lekipising]

Hi

I am streaming editor js content and I want to render to Editor JS nicely as it comes. I am calling the render method to update the content. However, this causes flickering on the UI while the data is being updated.

Rendering

editorRef.current.render({
        blocks: [...prevBlocks, ...newBlocks],
      });

I am doing this in a useEffect where I check the received data and extract complete blocks.

my editor js instance

useEffect(() => {
    const holder = document.getElementById("editorjs");
    if (!holder) return;

    if (!editorRef.current) {
      editorRef.current = new EditorJS({
        holder: "editorjs",
        tools: EDITOR_JS_TOOLS,
        placeholder: "Type text or paste a link",
      });

      // callbacks
      editorRef.current?.isReady
        .then(() => {
          console.log("Editor.js is ready to work!");
        })
        .catch(() => {
          toaster({
            message: "The editor is not ready yet.",
            status: "info",
          });
        });
    }
  }, []);

When I stream the received content on a normal p tag, there is no flickering.

Whats the best way to achieve smooth rendering (like chatGPT)?

[IhorKirei]

I have the same issue atm.