Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Document how to unmount transition child #30382

Merged
merged 1 commit into from
Dec 24, 2021
Merged

[docs] Document how to unmount transition child #30382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/modules/components/AppLayoutDocsFooter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,7 +308,7 @@ export default function AppLayoutDocsFooter() {
</PaginationDiv>
</React.Fragment>
)}
<Collapse in={commentOpen} onEntered={handleEntered}>
<Collapse in={commentOpen} unmountOnExit onEntered={handleEntered}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would extract this to a separate PR, but probably not worth the effort :D

Copy link
Member Author

@oliviertassinari oliviertassinari Dec 24, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see what you mean. What's the main value proposition of this PR? To be fair, I think that the WAVE error is wrong and should be ignored, the input is not interactive. I think that the real value of this prop is about reducing the upfront work to render the page, so aligned with the docs, it illustrates the use case with a real life win.

This win:

Screenshot 2021-12-24 at 22 28 16

is a good side effect. But if you go to https://mui.com/components/textarea-autosize/, you will still see the error.

<form
aria-labelledby="feedback-message"
onReset={handleCancelComment}
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/accordion/accordion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ accordions it might be a good idea to change this default behavior by enabling t
<Accordion TransitionProps={{ unmountOnExit: true }} />
```

As with any performance optimization this is not a silver bullet. Be sure to identify
bottlenecks first and then try out these optimization strategies.
As with any performance optimization this is not a silver bullet.
Be sure to identify bottlenecks first and then try out these optimization strategies.

## Accessibility

Expand Down
14 changes: 14 additions & 0 deletions docs/src/pages/components/transitions/transitions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,3 +117,17 @@ You can also visit the dedicated sections of some of the components:
- [Popper](/components/popper/#transitions)
- [Snackbar](/components/snackbars/#transitions)
- [Tooltip](/components/tooltips/#transitions)

## Performance & SEO

The content of transition component is mounted by default even if `in={false}`.
This default behavior has server-side rendering and SEO in mind.
If you render expensive component trees inside your transition it might be a good idea to change this default behavior by enabling the
`unmountOnExit` prop:

```jsx
<Fade in={false} unmountOnExit />
```

As with any performance optimization this is not a silver bullet.
Be sure to identify bottlenecks first and then try out these optimization strategies.