Impossible to use WebStorm with React + MUI

Question

I am using WebStorm 2022 with React, JavaScript and MUI -- and I have been getting insanely slow performance, that it's become impossible to use.

Autocomplete takes around 6-7 seconds to load, and my CPU usage rockets up to 100% whenever I type anything in my JSX file.

Example code:

function UserInputBox() {
    return (
        <Box
            display="flex"
            flexDirection="column"

            alignItems="center" p={5} boxShadow={3}
        >
            <Box
                p={5}
                sx={{background: "blue", alignItems: "stretch"}}
            >
                <h1>User Input</h1>
            </Box>

            <Stack spacing={2}>
                <TextField label="Username" />
                <TextField label="Age (Years)" />
                <Button
                    variant="contained"
                    sx={{borderRadius: 28, textTransform: "none"}}
                >
                    Add User
                </Button>
            </Stack>
        </Box>
    )
}

export default UserInputBox

Answer 1

That was due to the bug in webstorm. They had fixed it and will probably comes in the next EAP build. Check below link for activity.
https://youtrack.jetbrains.com/issue/WEB-59766/Very-slow-code-analysis-in-React-MUI-Javascript-code