What can I do to optimize performance when my editor is updated every time?

[Michael-indochat]

I created a custom suite to calculate the text length and editor content, and pass it out to the outer state, so that my Page can display specific UI according to these states

When the editor preset mount is completed, I will give the editor a piece of initialValue data, and at this time I will pass the data to the parent layer's Page to update the state

I am now adding a listener. Every time I change the content of the editor, I will update these states to the parent layer, but I suspect that this approach will cause performance problems. Is there a recommended way to fix it?

CustomPlugin source code

import { GreetingMessageAPIFormat } from "@/types/greetingMessage";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { $getRoot, $nodesOfType, EditorState } from "lexical";
import { MentionNode } from "../nodes/MentionNode";
import { convertTextContent } from "../utils/mention-utils";

type ComputedTextLengthPluginProps = {
  setTextLength: (textLength: number) => void;
  setEditorState: React.Dispatch<
    React.SetStateAction<GreetingMessageAPIFormat | undefined>
  >;
};
const calculateTotalMentionLength = (mentionNodes: MentionNode[]) =>
  mentionNodes.reduce(
    (totalLength, current) => totalLength + current.getTextContent().length,
    0,
  );

export default function ComputedTextLengthPlugin({
  setTextLength,
  setEditorState,
}: ComputedTextLengthPluginProps) {
  const [editor] = useLexicalComposerContext();

  const handleEditorStateChange = (editorState: EditorState) => {
    editorState.read(() => {
      const rootElement = $getRoot();
      const entireContentLength = rootElement.getTextContent().length;

      // Calculate the length of the mentions within the text
      const mentionNodes: MentionNode[] = $nodesOfType(MentionNode);
      const mentionNodesPlaceholderLength = mentionNodes.length * 20; // Assuming each mention placeholder has a fixed length of 20
      const totalMentionLength = calculateTotalMentionLength(mentionNodes);

      // Determine the text length excluding mentions, accounting for human-computed length
      const nonMentionTextLength =
        entireContentLength -
        totalMentionLength +
        mentionNodesPlaceholderLength;
      setTextLength(nonMentionTextLength);

      // Convert the editor's content and update the state
      const textContent = convertTextContent(rootElement);
      setEditorState(previousState => {
        if (previousState && previousState.msg_type === "TEXT") {
          return { ...previousState, message: textContent };
        }
        return previousState;
      });
    });
  };

  // TODO: It should be wrapped with an editor to monitor the editor's changes to update, otherwise it is every update now, which may cause performance problems
  editor.registerUpdateListener(({ editorState }) => {
    editor.update(() => {
      handleEditorStateChange(editorState);
    });
  });

  return null;
}

[Michael-indochat]

Thanks for creating the discussion board