[material-ui] Lazy-loaded Collapse with unmountOnExit causes infinite loop about material-ui

[tajbowness]

Wrapping the code inside of collapse with Suspense also fixes the issue (lazy, i guess). But you don't get the very first transition, instead its pop ups. The issue seems to be caused by lazy.

[aarongarciah]

Lazy loading is also likely another reason why this issue is occuring. But for my project it's necessary otherwise, I'd get these prompts

@tajbowness are you receiving these errors for all components or only those coming from @mui/material? I'd recommend looking for the root cause.

I've been testing a bit and this is the summary is:

• The issue happens with the combination of lazy (without Suspense) + unmounOnExit.
• Wrapping lazy-loaded components with Suspense makes the issue disappear but the initial transition is lost.
• unmountOnExit with regularly loaded components works fine.
• The error is thrown in the Transition component from the react-transition-group, which Collapse uses under the hood. Unclear what causes it.

I'd always recommend wrapping lazy-loaded components in Suspense, especially the ones displayed after user interaction. See this example adapted from the React docs.

I think we should focus on a more realistic scenario like this one I adapted from your demo: playground. Collapse wraps a lazy-loaded component wrapped in Suspense. The problem in this case is that the transition doesn't work when the component is lazy-loaded for the first time.

@siriwatknp @DiegoAndai do you remember similar issues with Material UI transition components?