Custom Components Always Re-rendered

[Ramon-W]

Initial checklist

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

Affected packages and versions

[email protected], 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:

1. Replace any component with a custom component, in this case p.
2. 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]

[Ramon-W]

Fixed link

[JounQin]

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

See also #791 (comment)