reactjs - React Markdown and MathJax with typing effect causing performance issues - Stack Overflow

admin管理员组

文章数量:1290957

I'm using React Markdown in order to render text combined with a typing effect. Because of the typing effect it is re-rendering the whole text on each letter addition and this is causing performance issues.

const MathJaxRenderer: FC<{ text: string }> = memo(({ text }) => {
return (
    <MathJax>
        <ReactMarkdown
            remarkPlugins={[remarkGfm]}
            components={{
                p: ({children}) => (
                    <p style={{ margin: '1em 0' }}>
                        {children}
                    </p>
                ),
                code: ({children, inline}) => {
                    if (inline) {
                        return <span>{children}</span>;
                    }
                    return (
                        <div style={{ margin: '1em 0' }}>
                            {children}
                        </div>
                    );
                }
            }}
        >
            {text}
        </ReactMarkdown>
    </MathJax>
);

    const typeNextChar = () => {
        if (charIndex < fullText.length && fullText[charIndex + 1]) {
            setChatMessages(prevState => {
                const updatedMessages = [...prevState];
                const currentMessage = updatedMessages[index];

                if (currentMessage) {
                    const currentDisplayText = currentMessage.displayText || '';
                    currentMessage.displayText = currentDisplayText + fullText[charIndex];
                    charIndex++;
                }
                return updatedMessages;
            });

            requestAnimationFrame(typeNextChar);
        } else {
            setChatMessages(prevState => {
                const updatedMessages = [...prevState];
                if (updatedMessages[index]) {
                    updatedMessages[index].isTyping = false;
                }
                return updatedMessages;
            });
        }
    };

    typeNextChar();
};

Is there a way to improve this? Thanks in advance.

本文标签： reactjsReact Markdown and MathJax with typing effect causing performance issuesStack Overflow