How to use markdownhooks and minimize re-rendering as much as possible.

[sunhaixun]

In the context of EventSource where the text content is not static, how should I utilize markdownhooks to minimize rendering as much as possible?

[ChristianMurphy]

@sunhaixun could you share an example of what package you are using and how you are rendering content in a sandbox like

• https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/remark-with-vite
• https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/remark-rehype-with-vite
• https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-vite

And explain a bit around what you are trying to do?

[sunhaixun]

I'm sorry to disturb you, I sincerely seek your help.
https://stackblitz.com/edit/github-mka3pqtf?file=src%2Fmain.jsx

[ChristianMurphy]

Thanks for the additional context.
There is no streaming, incomplete, or invalid markdown.
Meaning remark/react-markdown treat every source text that is set, as a complete document.

I suspect you are streaming text from an LLM.
If so see https://github.com/orgs/remarkjs/discussions/1332#discussioncomment-9499003 and https://github.com/orgs/remarkjs/discussions/1332#discussioncomment-12229454

To answer your direct question

and minimize re-rendering as much as possible.

You may not want to do this at all.
If you want to show the user the content as soon as possible, show them as soon as possible 🙂
But if you want to slow it down to reduce renders, you could try throttling https://www.geeksforgeeks.org/javascript-throttling/

[remcohaszing]

The result looks as expected. Neither markdown nor Mermaid can be streamed, yet you stream it. The result is expected to look wonky. You can better see what’s going on by increasing the interval time.

You can try to reduce the effect by throttling. Maybe useDeferredValue helps, otherwise you need to make your own implementation.

Also please read the Important notice of the remark-mermaidjs readme.

[remcohaszing]

The Mermaid error flashes were a bug. This is fixed in [email protected].