Material-ui: Menu Popover calls setState (or forceUpdate) while unmounted when app hot updates

[jimmycarlinco]

When react-hot-reloader updates app, I am seeing the following error:
https://i.imgur.com/gRvDfbp.png

It seems to originate from material-ui Menu. I am lost. Is this a bug or am I doing something wrong. Can someone point me in the right direction?

My menu is along the lines of this:

import React from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

class MyMenu extends React.Component {
  state = {
    anchorEl: null,
  };

  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = (message) => () => {
    this.setState({ anchorEl: null });
    console.log(message);
  };

  render() {
    const { anchorEl } = this.state;

    return (
      <div>
        <Button
          aria-owns={anchorEl ? 'fade-menu' : null}
          aria-haspopup="true"
          onClick={this.handleClick}
        >
          Open with fade transition
        </Button>
        <Menu
          id="fade-menu"
          anchorEl={anchorEl}
          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
          getContentAnchorEl={null}
          open={Boolean(anchorEl)}
          onClose={this.handleClose(null)}
        >
          <MenuItem onClick={this.handleClose('Profile')}>Profile</MenuItem>
          <MenuItem onClick={this.handleClose('My Account')}>My account</MenuItem>
          <MenuItem onClick={this.handleClose('Logout')}>Logout</MenuItem>
        </Menu>
      </div>
    );
  }
}

export default MyMenu;

• [x] This is a v1.x issue (v0.x is no longer maintained).
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.2.0 |
| React | v16.3.0 |
| react-hot-loader | v4.3.0 |

[oliviertassinari]

I have never seen react-hot-loader performs consistently. It's not something I think we should put energy into. I don't think that it can be reproduced on our documentation website. I'm closing.

[udanpe]

Easy way to fix add &&

{1 && <>
  <Menu>
    <MenuItem />
  </Menu>
</>}

[vitexikora]

I disagree, that it should not be further investigated - it may also mean that there is something bad happening in the Popover. Also, some of us really need to persist the state between updates - in some apps this greatly saves time debugging.
However, the fix is straightforward, simply render the menu only when you need to, like udanpe suggested:

{this.state.open && (
  <Menu open={this.state.open}>
    <MenuItem />
    <MenuItem />
    <MenuItem />
  </Menu>
)}

It will rob you of the closing animation but what can you do..

[oliviertassinari]

I would encourage people not to use react-hot-loader: https://github.com/mui-org/material-ui/issues/12160#issuecomment-405170692.