Re render ReactMarkdown

Question

Steps to reproduce:

Using props children and update state component in which ReactMarkdown is placed.

Expected behavior:

I expected that when processing the same markdown, the generated html would not change.

Actual behavior:

I connected MutationObserver for show mutations in html. And and use console.log in children components. We can see in the console log that the children components start every time and the html changes when the state of the component in which ReactMarkdown is located changes.

Link to runnable example: See console log in this example

Package: ReactMarkdown 8.0.2

Runtime Node v17

Package manager npm 8

OS Windows, Linux

Build and bundle tools Create React App

Answer 1

React.memo helped solve the problem see the exmple