material-ui Drawer - findDOMNode is deprecated in StrictMode

Question

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';

UPDATE

V5 is officially out (and now called MUI). If upgrading is an option for you - it should solve this issue as well.

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')
);

This warning is due to the Transition component which is used in many of the material-ui components like Drawer, Tooltip, Snackbar etc.

Personally, I faced this warning in all of them, but only fixed this for the Snackbar component.

The solution is to create a ref and pass it into your root component. Then, manually forward the ref to your child components which use Transition.

Here is the code for the Snackbar component which fixed the issue for me. Since it's just a warning, probably ignore it. You don't need to remove StrictMode. It will be fixed in future material-ui releases.

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

//MUI Stuff
import { makeStyles } from '@material-ui/core/styles';
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';

// Redux
import { hideAlert } from '../../redux/actions/uiActions';
import Slide from '@material-ui/core/Slide';

const Alert = React.forwardRef((props, ref) => {
    return <MuiAlert ref={ref} elevation={6} variant="filled" {...props} />;
});

const SlideTransition = React.forwardRef((props, ref) => {
    return <Slide ref={ref} {...props} direction="left" />;
});

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    snackbar: {
        [theme.breakpoints.down('sm')]: {
            bottom: 65,
        },
    },
}));

const SnackAlert = () => {
    const snackbarRef = React.createRef(null);
    const classes = useStyles();
    const { alert, alertType, alertMessage } = useSelector((state) => ({
        alert: state.ui.alert,
        alertType: state.ui.alertType,
        alertMessage: state.ui.alertMessage,
    }));
    const dispatch = useDispatch();
    const [open, setOpen] = React.useState(false);

    useEffect(() => {
        setOpen(alert);
    }, [alert]);

    const handleClose = () => {
        setOpen(false);
        dispatch(hideAlert());
    };

    return (
        <div className={classes.root}>
            <Snackbar
                ref={snackbarRef}
                className={classes.snackbar}
                open={open}
                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
                autoHideDuration={5000}
                onClose={handleClose}
                message={alertMessage}
                TransitionComponent={SlideTransition}
            >
                <Alert onClose={handleClose} severity={alertType}>
                    {alertMessage}
                </Alert>
            </Snackbar>
        </div>
    );
};
export default SnackAlert;

change your theme configuration

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

to

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

Generates a theme that reduces the amount of warnings inside React.StrictMode like Warning: findDOMNode is deprecated in StrictMode.

WARNING: Do not use this method in production.

for production use import { createMuiTheme } from '@material-ui/core'; and replace StrictMode to Fragment.

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

to

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