Live editor render twice times on page first mount

[cncolder]

🐛 Bug Report

Live editor render component twice times

Have you read the Contributing Guidelines on issues?

yes

To Reproduce

1. Paste code below into .mdx file

	```jsx live
	function Demo() {
    	React.useEffect(() => console.log('mount'), [])
    	return null
	}
	```

Expected behavior

log 'mount' one time

Actual Behavior

mount
mount

Your Environment

• Docusaurus version used: 2.0.0-alpha.58
• Environment name and version: Chrome 83
• Operating system and version (desktop or mobile): macOS

Reproducible Demo

(Paste the link to an example repo, including a siteConfig.js, and exact instructions to reproduce the issue.)

[slorber]

Hi,

That seems right, but this only happens on initial mount (hydration), not on navigation.

It is due to a key that was added on the Playground:

        <Playground
          key={isClient}

Added in commit: refactor(v2): add @theme-init alias to give access to initial components (#2464)

@lex111 do you remember why this was needed?

[cncolder]

If someone want to explain how to implement useMount by react hook. e.g. author of react-use. People will ask “why mount trigger two times”

[9oelM]

I will work on this issue

[9oelM]

Well I've been inspecting this, and after an hour of hopeless digging, I even got to the point where I omitted almost every prop fed to component.

I was doing something like:

const PlaygroundTest = memo((props) => {
  console.log(props)
  
  return <Playground {...props} />
}, (a, b) => {
  console.log(a, b)

  return false;
})

withLiveEditor = ((Component) => {
  const WrappedComponent = (props) => {
    // const {isClient} = useDocusaurusContext();
    // const prismTheme = usePrismTheme();

    console.log(props.live)
    if (props.live) {
      return (
        <PlaygroundTest
          // key={isClient}
          scope={ReactLiveScope}
          // theme={prismTheme}
          // {...props}
        />
      );
    }

    return <Component {...props} />;
  };

  return WrappedComponent;
});

to just test React.memo works. However, the areEqual function as the second argument does not ever get called. I don't know what I'm doing wrong there.

Any idea?

[slorber]

@9oelM I think this is due to a similar key being on the doc:

    <Layout
      key={isClient}

I don't know exactly why we need this key here, it is here for a long time, but I'd be happy to remove it if it does not produce any weird side-effect

[9oelM]

I tried that too but it didn't work.. :(
I struggled for like an hour, still haven't found a clear walkthrough

[9oelM]

Seems like some other issue other than the key.. hmm

[9oelM]

actually, i will try again

[SunXinFei]

same issue
constructor and componentDidMount will run twice in markdown file.