findDOMNode is deprecated in StrictMode React material UI

Question

I am getting this error on my React material UI project

By looking at the error I guess it comes somewhere inside the Drawer.js component. This is my full Drawer.js component

import React, { Fragment, useState } from "react";
import clsx from "clsx";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import { List, Collapse } from "@material-ui/core";
import Divider from "@material-ui/core/Divider";
import ListItem from "@material-ui/core/ListItem";
import IconButton from "@material-ui/core/IconButton";
import ListItemText from "@material-ui/core/ListItemText";
import { toggleDrawer } from "../../store/actions/authActions";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
// import ClickAwayListener from '@material-ui/core/ClickAwayListener'
import { useHistory } from 'react-router-dom';
import { connect } from "react-redux";

import { withRouter } from "react-router";

const useStyles = makeStyles({
  list: {
    width: 250,
  },
  fullList: {
    width: "auto",
  },
});

function TemporaryDrawer(props) {
  const classes = useStyles();
  const theme = useTheme();
  // const [open, setOpen] = React.useState(false);
  const [openIndex, setOpenIndex] = useState(0);

  let history = useHistory();

  // const handleDrawerOpen = () => {
  //   setOpen(true);
  // };

  const handleDrawerClose = () => {
    props.toggleDrawer();
  };

  const handleClick = (index) => {
    if (openIndex === index) {
      setOpenIndex(-1);
    } else {
      setOpenIndex(index);
    }
  };

  const onToggle = () => (event) => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }

    props.toggleDrawer();
  };

  const onRoute = (path) => {
    // props.history.push(path);
    history.push(path);

    props.toggleDrawer();
  };

  const list = (anchor) => (
    <div
      className={clsx(classes.list, {
        [classes.fullList]: anchor === "top" || anchor === "bottom",
      })}
      role="presentation"
    >
      <div className={classes.drawerHeader}>
        <IconButton onClick={handleDrawerClose}>
          {theme.direction === "ltr" ? (
            <ChevronLeftIcon />
          ) : (
            <ChevronRightIcon />
          )}
        </IconButton>
      </div>
      <Divider />

      <List>
        {props.permissions.map((route, index) => (
          <Fragment key={index}>
            <ListItem button onClick={(e) => handleClick(index)}>
              <ListItemText primary={route.name} />
              {index === openIndex ? <ExpandLess /> : <ExpandMore />}
            </ListItem>
            {route.children.length && (
              <Collapse
                in={openIndex === index ? true : false}
                timeout="auto"
                unmountOnExit
              >
                <List component="div" disablePadding>
                  {route.children.map((child, idx) => (
                    <ListItem
                      button
                      className={classes.nested}
                      key={idx}
                      onClick={() => onRoute(child.path)}
                    >
                      <ListItemText primary={child.name} />
                    </ListItem>
                  ))}
                </List>
                <Divider />
              </Collapse>
            )}
          </Fragment>
        ))}
      </List>
      {/* <Divider /> */}
    </div>
  );

  return (
    <div>
      {props.token && (
        <Drawer
          anchor="left"
          open={props.isDrawerOpen}
          onClose={onToggle("left", false)}
          variant="persistent"
        >
          {list("left")}
        </Drawer>
      )}
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    isDrawerOpen: state.auth.isDrawerOpen,
    token: state.auth.token,
    permissions: state.auth.routes,
  };
};

export default withRouter(
  connect(mapStateToProps, { toggleDrawer })(TemporaryDrawer)
);

I go through this error and some say this is a problem in MUI library and no way to fix this. But I believe there must be a workaround for this. This causes serious problems for UI.

Where this error comes from and what can I do to fix this?

Any help!

Thanks in advance. =)

I use material UI 4.11.0 and react 16

Does this answer your question? [material-ui Drawer - findDOMNode is deprecated in StrictMode](https://stackoverflow.com/questions/61220424/material-ui-drawer-finddomnode-is-deprecated-in-strictmode) — Brian Lee, Nov 14 '20 at 04:08
That is a warning, not an error, by the way... the workarounds are (1) ignore the warning and carry on, (2) open an issue and hope they fix it, (3) fork the project repo, fix it yourself and open a PR, and hope it gets approved and merged, (4) find a different drawer component. — Drew Reese, Nov 14 '20 at 05:35

score 0 · Answer 1 · answered Apr 29 '21 at 03:08

You only need to create a new childComponent with react.forwardRef passing respective props and refs:

const ChildComponent = React.forwardRef((props, ref) =>
  <div ref={ref}>
    <yourChildcomponent {...props} />
  </div>
);

In your render change the name of the original Child for the new:

<ChildComponent... />

findDOMNode is deprecated in StrictMode React material UI

1 Answers1