Too Much Render With React Markdown

I am using React Markdown (https://www.npmjs.com/package/react-markdown) to render markdown content in my NextJS project. When I refresh I have two 'toto' & 'titi' in my termin

Solution 1:

It's part of Reacts development tooling, StrictMode. It is expected and only applies in development mode. You can remove the StrictMode to see it only render the expected number of times, but obviously you lose some development tooling. This tooling can warn you about certain unsafe or unwise practices you might want to avoid such as using legacy APIs.

More details here:

• Reactjs Docs
• A blog with a good overview

Solution 2:

If this is truly the only code you have, then it looks like it's normal. You may have other code that uses these components and that's why in shows twice. But based off the code you have right there, there's no bug.

Solution 3:

This is a known side-effect of using React.StrictMode, only in debug mode. You can read more about this here.

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

• Class component constructor, render, and shouldComponentUpdate methods
• Class component static getDerivedStateFromProps method
• Function component bodies
• State updater functions (the first argument to setState) Functions passed to useState, useMemo, or useReducer