Popover trigger children component mount twice when in StrictMode

[hugo972]

useState(() => console.log("debug")); just for ease of repro called twice when in StrcitMode

function Repro() {
    const [open, setOpen] = useState(false);
    return (
        <div>
            <Button onClick={() => setOpen(true)}>open</Button>
            <Popover open={open} onClose={() => setOpen(false)}><Debug/></Popover>
        </div>);
}

function Debug() {
    useState(() => console.log("debug"));
    return <div />;
}

ReactDOM.Render(<React.StrictMode><Repro /></React.StrictMode>);

• [x ] The issue is present in the latest release.
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The console.log in the useState inital value callback should only be executed once. But when you open the popover you get two messages in the console. This behavior is consistant with all other hooks. Which lead me to guess there is a duplicate copy of the popover children running in parallel. This will only happen in StrcitMode. If you render in regular mode it will only console.log once.

Expected Behavior 🤔

Only a single copy of the children will be created (if that's the issue). console.log should be called only once.

Steps to Reproduce 🕹

run the code above and look in the console

Context 🔦

Your Environment 🌎

Repro using MaterialUI code sandbox example for popover https://codesandbox.io/s/p6i6p,
just add the <StrictMode> around <Demo/> and add the <Debug/> component under the popover and look in the console

[eps1lon]

This is expected behavior for StrictMode which calls all the methods that should be pure twice. This includes render methods and state initializers used in useState. https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects isn't very explicit about this though.

Aside: The linked demo does not use StrictMode.

[hugo972]

Good to know, thanks