How to Prevent Images from Re-rendering?

[ficapy]

I am using a project ChatGPT-Next-Web that uses react-markdown for rendering. I've encountered a bug where, under streaming response conditions, it fails to handle image rendering correctly. Images are being re-rendered and requested from the network hundreds of times.

I created a minimal reproduction: https://stackblitz.com/edit/vitejs-vite-3jdib8?file=src%2FApp.jsx. It adds a bit of content to the existing Markdown every second, causing the Markdown to re-render and re-request the images.

import React from 'react';
import ReactMarkdown from 'react-markdown';

let markdown1 = `![https://placehold.co/600x400](https://placehold.co/600x400)
`;

const markdown2 = `
123

`;

function App() {
  const [content, setContent] = React.useState(markdown1);

  React.useEffect(() => {
    const x = setInterval(() => {
      setContent((p) => markdown2 + p);
    }, 1000);
    return () => {
      clearInterval(x);
    };
  }, []);

  return (
    <div className="App">
      <ReactMarkdown>{content}</ReactMarkdown>
    </div>
  );
}

export default App;

I found a similar discussion here: remarkjs/react-markdown#703.

Is there an effective way to ensure that each image is only requested once?

[ChristianMurphy]

Welcome @ficapy! 👋
Sorry you ran into some confusion.

The answer is in your screenshot.
The image is being re-requested because you disabled caching in your developer console.
Forcing your browser to re-request the image every time, even though it would usually be cached and immediately rerender.
You can learn more about how to use Chrome developer network tools at https://developer.chrome.com/docs/devtools/network/reference

[p-runge]

This prevents the flickering if the src is actually valid. But if it 404s, the image element will render the alt attribute instead causing the same flickering.

To make this question a bit bigger: Is the current rendering behaviour of react-markdown intended like this? "This" meaning always creating fresh elements in the (physical) DOM even if they didn't change at all?

I'm not super deep into that, but couldn't this be prevented using React keys?

Also: Would it be possible to do that yourself using some sort of plugins?

[ChristianMurphy]

To make this question a bit bigger: Is the current rendering behaviour of react-markdown intended like this?

Yes.
React markdown is a document rendered, not an editor.
It generates keys as best it can, but it is outside the scope and intent to figure out what you are adding and what is the same.

"This" meaning always creating fresh elements in the (physical) DOM even if they didn't change at all?

It doesn't always, seem Remco's comment before yours.
It rerenders more when you prepend.

I'm not super deep into that, but couldn't this be prevented using React keys?

No

Also: Would it be possible to do that yourself using some sort of plugins?

Is it possible, sure, anything is possible with time and effort.

Is it quick and easy, no, it's a rather complicated and hard problem to do right.
There have been proposed ideas in the past, all have had serious negative performance or usability limitations.

[p-runge]

"This" meaning always creating fresh elements in the (physical) DOM even if they didn't change at all?

It doesn't always, seem Remco's comment before yours. It rerenders more when you prepend.

Oh, indeed, it doesn't!

After testing a bit more I figured out the reason why it actually DID update the full content in my scenario. It was because I was not using a static Components object but instead created a dynamic one by calling a helper function wrapping it with the full content like so:

const componentsWithContent: (content: string) => Components = (content) => ({
  p: ({ node, children, ...props }) => {
    // get the raw markdown of only the current paragraph
    const rawMarkdown = content.slice(node?.position?.start.offset, node?.position?.end.offset);

    // some shenanigans with rawMarkdown...

    return <p {...props}>{children}</p>;
  },
});

type MarkdownProps = {
  children: string;
};
export default function Markdown({ children: content }: MarkdownProps) {
  return (
    // creating a new components object here on every render
    <ReactMarkdown components={componentsWithContent(content)}>
      {content}
    </ReactMarkdown>
  );
}

This probably created a new React component for each markdown component on every render which resulted in the full content updating physically in the DOM.

I'm not completely sure how I can access the raw markdown inside of the individual components' rendering callback function without doing it the way I just did in the example above, but if I do find a solution, I'll update it here in case anyone faces the same issue.

[remcohaszing]

You can use a context provider to pass data around in React without using props.

[p-runge]

You can use a context provider to pass data around in React without using props.

Well... Sometimes the solution is just way more obvious than initially thought. Yes, that should definitely work.

Thanks to the both of you for being so responsive!

[ficapy]

Hi @ChristianMurphy
Thank you for pointing out this issue. Enabling the cache resolved the problem (I usually disable caching when debugging).

With the cache enabled, everything works fine in most scenarios (it's rare to find an image link on the internet without cache headers :). So, I created a non-caching SVG using Cloudflare Workers: https://no-cache-svg.zu.workers.dev.

Do you have any suggestions for this image? I don't want it to be re-requested when the URL hasn't changed.

Since most images have cache headers, the current implementation doesn't usually result in repeated requests. I'm just wondering if there's a more robust solution that doesn't rely on cache headers.

[ChristianMurphy]

@ficapy my strong recommendation is to configure the server to send the correct cache header.

Otherwise you are trying to solve a network problem with application logic.
You can but you are creating a maintainance nightmare for yourself.

If you the route of application side caching, I'd recommend a service worker to implement it https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
Or a library like https://developer.chrome.com/docs/workbox/

If you want to go down the rendering route, start by seeing @remcohaszing's comment above.
Users probably won't see the situation you shared.
LLMs generally append rather than prepend.