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 terminal... It is normal or what's wrong with this code?

import Head from 'next/head';
import ReactMarkdown from 'react-markdown';

function Section ({ data }) {

  const content = JSON.parse(data.markdown);

  const {
    title,
    sortContent
  } = data;

  console.log('toto');

  return (
    <>
      <main>
        <h1>{title}</h1>
        <h1>{sortContent}</h1>
        <ReactMarkdown source={content.default} escapeHtml={false} />
      </main>
    </>
  )
}

export async function getServerSideProps (context) {

  const json = await import('../../content/article1/data.json');
  const content = await import('../../content/fr/article1/content.md');

  console.log('titi');

  return {
    props: {
      data: {
        title: json.title_content,
        sortContent: json.short_content,
        markdown: JSON.stringify(content)
      }
    }
  }
}

export default Section

回答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

回答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.

回答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

来源：https://stackoverflow.com/questions/65398253/too-much-render-with-react-markdown

标签

javascript

reactjs

Markdown