Dialog with Transition throwing JS warning "findDOMNode is deprecated in StrictMode"

Question

I've created a simple Dialog component that is draggable and transitions in and out (with Grow) based on the example code here: https://material-ui.com/components/dialogs/#transitions (and scroll down for the draggable example)

When I try to use this dialog, it works perfectly. However, the console gets several warnings every time:

Here is my code:

    const Transition = React.forwardRef(function Transition(props, ref) {
        return <Grow ref={ref} {...props} />;
    });

    export class PaperComponent extends React.Component {
        render() {
            return (
                <Draggable handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
                    <Paper {...this.props} />
                </Draggable>
            );
        }
    }

    export class BasicDialog extends React.Component {
        render() {
            return (
                <Dialog
                    open={this.props.dialogData.title ?? false}
                    PaperComponent={PaperComponent}
                    TransitionComponent={Transition}>
                    <DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
                        {this.props.dialogData.title}
                    </DialogTitle>
                    <DialogContent style={{ textAlign: 'center' }}>
                        <DialogContentText>
                            {this.props.dialogData.text}
                        </DialogContentText>
                        {this.props.dialogData.content}
                    </DialogContent>
                    <DialogActions style={{ justifyContent: 'center' }}>
                        <ButtonGroup color="primary">
                            <Button onClick={() => this.props.onComplete()}>OK</Button>
                        </ButtonGroup>
                    </DialogActions>
                </Dialog>
            );
        }
    }

How can I fix this? It's not affecting my application's functionality, but I don't like errors/warnings in the console. And I thought I followed the instructions on the Material UI site, but if I did it correctly, would I be getting errors?

Answer 1

The only way to remove the warning is to remove the strict mode in your application, there're a few material ui components that have the warning, there're some issues in their github page that have the same problem: https://github.com/mui-org/material-ui/issues/20561, your easiest way to fix the problem is removing the strict mode, you can do this in your reactDOM render call:

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

This is best way to go until they fix the error.

Btw strict mode is a mode that shows warnings on some potential issues that your app might have, for example using component lifecycle methods that are deprecated. Here you can read more: https://reactjs.org/docs/strict-mode.html