From cef4047b9067740e921b9460324c325039d71f31 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 23 Dec 2021 15:09:06 +0100
Subject: [PATCH] [docs] Document how to unmount element when in={false}

---
 docs/src/modules/components/AppLayoutDocsFooter.js |  2 +-
 docs/src/pages/components/accordion/accordion.md   |  4 ++--
 .../pages/components/transitions/transitions.md    | 14 ++++++++++++++
 3 files changed, 17 insertions(+), 3 deletions(-)

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() {
             </PaginationDiv>
           </React.Fragment>
         )}
-        <Collapse in={commentOpen} onEntered={handleEntered}>
+        <Collapse in={commentOpen} unmountOnExit onEntered={handleEntered}>
           <form
             aria-labelledby="feedback-message"
             onReset={handleCancelComment}
diff --git a/docs/src/pages/components/accordion/accordion.md b/docs/src/pages/components/accordion/accordion.md
index 7b891ab59f0d87..74878be250d637 100644
--- a/docs/src/pages/components/accordion/accordion.md
+++ b/docs/src/pages/components/accordion/accordion.md
@@ -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
 
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
+<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.