When the content adds up frequently

[jjangga0214]

Hi!

I am using react-markdown and configured rehype-starry-night.

import { MarkdownHooks } from 'react-markdown'
import rehypeStarryNight from 'rehype-starry-night'

<MarkdownHooks
  rehypePlugins={[rehypeStarryNight]}
>
  {children}
</MarkdownHooks>

rehype-starry-night is an async plugin.
Because of being async, it becomes non-reactive when {children} changes frequently.

Kapture.2025-04-18.at.11.37.37.mp4

How can I resolve the issue?

[JounQin]

Memorized your rehypePlugins, or just move it outside the componnet, otherwise it changes on every render. And use MarkdownAsync or MarkdownHooks for async plugins.

Duplicate of rehypejs/rehype-starry-night#1

[jjangga0214]

Thank you!

import { MarkdownHooks } from 'react-markdown'
import rehypeStarryNight from 'rehype-starry-night'

const rehypePlugins = [rehypeStarryNight]

export function AiChat() {
  return (
    <MarkdownHooks
      rehypePlugins={rehypePlugins}
    >
      {children}
    </MarkdownHooks>
  )
}

I refactored like this.
But it's still very slow. It renders, but not a cumulative UX.
For example, I expect it to be rendered word by word.
But it actually renders the whole response at once(very slow.. takes several seconds).
Would you give me an advise?

[JounQin]

It's hard to cache: remarkjs/react-markdown#891 (review)

[jjangga0214]

Thanks. Would it make sense to export a new sync (along with async) plugin from rehype-starry-night?

[jjangga0214]

(I temporarilly ended up applying rehypeStarryNight only after AI's generation is completed by the way)