material-ui Drawer - findDOMNode is deprecated in StrictMode

Question

I have a simple ReactJS app based on hooks (no classes) using StrictMode.

I am using React version 16.13.1 and Material-UI version 4.9.10.

In the Appbar I a

Answer 1

Yeah it's annoying. Material UI's team is not keeping up with the React devs. For now, just remove the Strict mode tag. It's unfortunately what happens with cutting edge technologies.

Answer 2

This is a StrictMode Warning

Strict mode checks are run in development mode only; they do not impact the production build.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

to

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

Answer 3

According to Material-ui changelog, it should be solve in V5, which is still in alpha.

It seems that at least in some cases this issue cause by createMuiTheme. You can solve this issue by using the experimental (unstable) theme creator

If you want to get the experimental theme creator instead of removing React.StrictMode, you can change it's import from:

import { createMuiTheme } from '@material-ui/core';

To

import { unstable_createMuiStrictModeTheme as createMuiTheme } from '@material-ui/core';

Answer 4

Have you tried using React.forwardRef? [MUI docs] [React docs]

const PersistentDrawer = React.forwardRef(
  (props, ref) => (
    <Drawer
      variant="persistent"
      anchor="left"
      open={props.open}
      ref={ref}
    />
  )
)

return (
  <div className={classes.root}>
    <AppBar position="static">
      <Toolbar>
        <IconButton
          aria-label="menu"
          className={classes.menuButton}
          color="inherit"
          edge="start"
          onClick={handleDrawerOpen}
        >
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" className={classes.title}>
          Online Information
        </Typography>
      </Toolbar>
    </AppBar>
    <PersistentDrawer open={open} />
  </div>
)