CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
innoxius
innoxius

Reputation: 127

findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition (created by MUI Backdrop) which is inside StrictMode

I'm getting the following warning:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here:

in div (created by Transition)
in Transition (created by ForwardRef(Fade))
in ForwardRef(Fade) (created by ForwardRef(Backdrop))
in ForwardRef(Backdrop) (created by WithStyles(ForwardRef(Backdrop)))
in WithStyles(ForwardRef(Backdrop)) (at CircularProgressOverlay.tsx:20)
in CircularProgress (at VpmsSpinnerMat.tsx:7)
in VpmsSpinner (at ProductCreate.tsx:19)
in div (at ProductCreate.tsx:18)
in ProductCreate (created by Context.Consumer)
in Route (at ProductMain.tsx:36)
in Switch (at ProductMain.tsx:34)
in Router (created by HashRouter)
in HashRouter (at ProductMain.tsx:33)
in Provider (at ProductMain.tsx:32)
in ProductMain (at App.tsx:9)
in div (created by Styled(MuiBox))
in Styled(MuiBox) (at Box.tsx:32)
in Box (at App.tsx:8)
in App (at src/index.tsx:9)
in StrictMode (at src/index.tsx:8)

And here is the component:

import React from "react";
import './spinner.css';
import {Backdrop, Theme} from "@material-ui/core";
import {createStyles, makeStyles} from "@material-ui/core/styles";

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        backdrop: {
            zIndex: theme.zIndex.drawer + 1,
            color: '#fff',
        },
    }),
);

export default function CircularProgress(props: any) {
    const classes = useStyles();
    const wrapper= React.createRef();

    return (
        <Backdrop className={classes.backdrop} open={true} ref={wrapper}>
            <div className="lds-dual-ring"/>
        </Backdrop>
    )
}

findDOMNode is caused by Transition.js (created by Backdrop) in MUI. Is there a way to remove the warning without disabling StrictMode? I tried with ref={wrapper}, but no effect.

Upvotes: 2

Views: 876

Answers (1)

innoxius
innoxius

Reputation: 127

I applied this solution:

import React from "react";
import './spinner.css';
import {Backdrop, Theme} from "@material-ui/core";
import {createStyles, makeStyles, unstable_createMuiStrictModeTheme, ThemeProvider} from "@material-ui/core/styles";

// FIXME. To be fixed in future versions of MUI. Not advised for use in Production: https://material-ui.com/customization/theming/
const theme = unstable_createMuiStrictModeTheme();

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        backdrop: {
            zIndex: theme.zIndex.drawer + 1,
            color: '#fff',
        },
    }),
);

export default function CircularProgress(props: any) {
    const classes = useStyles();

    return (
        <ThemeProvider theme={theme}>
            <Backdrop className={classes.backdrop} open={true}>
                <div className="lds-dual-ring"/>
            </Backdrop>
        </ThemeProvider>
    )
}

Upvotes: 1

Related Questions