Reputation: 298
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.
Upvotes: 1
Views: 28