How to obtain the rendering end time of custom label components to do other things？

[DrssXpro]

example：

I will customize the rendering of the code component here：

const markdown = "```javascript\nconsole.log('hello world')\n```";

function CustomCodeComponent(props: { content: string }) {
  const { content } = props;
  return <div style={{ color: "red", padding: "5px" }}>{content}</div>;
}

function App() {
  return (
    <div>
      <Markdown
        components={{
          code: useMemoizedFn(({ children }) => {
            const content = Array.isArray(children) ? children[0] : children;
            return <CustomCodeComponent content={content} />;
          }),
        }}
      >
        {markdown}
      </Markdown>
    </div>
  );
}

Because the markdown content here comes from LLM streaming data，but I don't know how to get the moment when the code component rendering ends. I need to do other things at this moment.😢

One solution I came up with is to solve it through useEffect and debounce:

const handleWhenContentEnd = debounce(() => {
  console.log("content end render...");
  // do something..
}, 500);

function CustomCodeComponent(props: { content: string }) {
  const { content } = props;

  useEffect(() => {
    handleWhenContentEnd();
  }, [content]);

  return <div style={{ color: "red", padding: "5px" }}>{content}</div>;
}

But you know, due to the issue of network latency in actual scenarios, this is clearly not a good approach...😢

So I want to ask for help, is there a better solution？🥺

[ChristianMurphy]

Welcome @DrssXpro! 👋
A few thoughts.

First taking a step back I'm not sure knowing when the component renders will help with the issue you are experiencing

But you know, due to the issue of network latency in actual scenarios, this is clearly not a good approach

It sounds like your application is network and LLM token response time bound.
Knowing when react-markdown renders doesn't help with that, the slowness has already happened react-markdown is probably the fastest part of this process, optimizing the fastest part doesn't help with the slow parts.

Consider leveraging a content delivery network to speed up networking times, optimizing the app to reduce the amount of network traffic, and/or choosing a faster LLM.

but I don't know how to get the moment when the code component rendering ends

To best answer you, a few things:

1. what are you trying to do after? (it matters)
2. what type of model are you using? (next token prediction (GPT and co), masked token prediction (BERT and friends), or diffusion (Mercury, etc)) which one changes when rendering is "done".

<Markdown
  components={{
    code: useMemoizedFn(({ children }) => {
      const content = Array.isArray(children) ? children[0] : children;
        return <CustomCodeComponent content={content} />;
      }),
    }}
  >
    {markdown}
</Markdown>

Avoid defining anonymous/arrow functions inside components, these prevent react from being able to re-use components between renders (it sees it as a new component every time)

[DrssXpro]

Sorry, maybe I didn't describe my problem clearly. I'm not trying to emphasize the issue with LLM, but rather to express the scenario of using react-markdown to render streaming data.

I would like to give you an example from our project：

we will use LLM to obtain streaming data in markdown format and render it on the view. In the markdown content, there is content in code block format that we need to customize for display. Of course, there are other formats besides code block format.

In the process of rendering streaming data to a view, we need to obtain the complete content of the code block as a parameter to send requests simultaneously.

The trouble I am currently facing is not knowing when to retrieve the complete content of a code block during the streaming rendering process

[ChristianMurphy]

I understand, and I'm trying to communicate that there is no such thing as "streaming markdown", "incomplete markdown", or "invalid markdown". All inputs to markdown are considered complete and valid documents. (see more at https://github.com/orgs/remarkjs/discussions/1332)

This is very much a LLM related problem. Which is why I asked what type you are using and how fast it runs.
Some options:

1. Use LLM guidance like https://github.com/guidance-ai/guidance, https://github.com/outlines-dev/outlines, https://github.com/stanfordnlp/dspy, https://github.com/eth-sri/lmql, https://github.com/instructor-ai/instructor, and many others. Which can ensure the model generates a subset of markdown you consider valid, and can withhold tokens until you are ready to consider it valid.
2. Assuming you are using next token prediction (append only) you could use https://github.com/syntax-tree/unist-util-select to do a previous sibling selector (https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator#selecting_a_previous_sibling) like code:has(+ *) to detect code blocks which have some content after it. This would have some limitations though:
   1. it only works with append only LLM models.
   2. it does not work for code which is intentionally added as the last piece of content.