Memory leak when using withStyles in class component

[helloitsm3]

There is a memory leak when switching pages while using withStyles in class component

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When switching to another page in my NextJS application, the console will throw "Can't perform a react state update on an unmounted component

Expected Behavior 🤔

Expected no memory leak error in console

Steps to Reproduce 🕹

Code:

import { withStyles } from "@material-ui/styles";

const useStyles = (theme) => ({
    someStyle: {
        backgroundColor: "red"
    }
})

class Index extends React.Component {
    const { classes } = this.props
    render() {
        render (
            <h1 className={classes.someStyle}>Test</h1>
        )
    }
}

export default withStyles(useStyles, { withTheme: true })(Index);

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.9.13
React	16.13.1
Browser	Firefox 76
TypeScript	3.8.3
NextJS	9.3.6

Image

[oliviertassinari]

@helloitsm3 Please provide a full reproduction test case. This would help a lot 👷 . A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[Richard-Halabi]

I have an issue with v4 , mui autocomplete component combined with popper component it is causing a memory leak on deployment. https://stackoverflow.com/questions/70637240/mui-autocomplete-combined-with-a-popper-component-is-causing-a-major-leak-when-d