Custom Components Always Re-rendered

Ramon-W commented 3 months ago

Initial checklist

[X] I read the support docs
[X] I read the contributing guide
[X] I agree to follow the code of conduct
[X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

react-markdown@9.0.1, react-markdown@latest

Link to runnable example

https://codesandbox.io/p/devbox/boring-kepler-mzcxps?file=%2Fsrc%2Fapp.tsx%3A56%2C9

Steps to reproduce

On the sandbox:

Replace any component with a custom component, in this case p.
Inspect element and observe how the p tag is being re-rendered even when it is not changing, and the non-custom components are not being re-rendered.

Expected behavior

The custom component should act normal and not be re-rendered unnecessarily. I believe regular components are given a key equal to the index, but I am unable to figure out how to apply this index on custom components, which might fix this issue. I have also attempted using memo but it did not work for me.

My specific issue is that I am streaming very long outputs from LLMs and passing them into react markdown, and I am using many stateful, custom components. However, these custom components are always being re-rendered and are unusable until the streaming stops.

Actual behavior

The custom components re-renders every time children changes.

Runtime

Node v17

Package manager

npm 8

OS

Linux, macOS

Build and bundle tools

Vite

JounQin commented 3 months ago

Ramon-W commented 3 months ago

Fixed link

JounQin commented 3 months ago

That's because your components prop always changes on every render.

github-actions[bot] commented 3 months ago

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

remarkjs / react-markdown