diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index 8b1d21cce20dab..7616f86a62a5b8 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -308,7 +308,7 @@ export default function AppLayoutDocsFooter() { )} - +
``` -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 diff --git a/docs/src/pages/components/transitions/transitions.md b/docs/src/pages/components/transitions/transitions.md index b425f666697dfb..8ee540ebeae638 100644 --- a/docs/src/pages/components/transitions/transitions.md +++ b/docs/src/pages/components/transitions/transitions.md @@ -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 + +``` + +As with any performance optimization this is not a silver bullet. +Be sure to identify bottlenecks first and then try out these optimization strategies.