[Stepper] Document how to avoid re-mounting between each step

In my application, I was rendering two different material-tables in two different steps of the Stepper component. When trying to test switching between steps quickly it would begin slowing down considerably and eventually freeze (in which I had to close the browser tab to continue).

I’m not sure the process for contributing code so I’m attaching below how I went around this by instead setting display: none; on all non-active steps.

interface StepContentProps {
	component: any;
	props?: any;
}

interface ContentProps {
	stepContent: StepContentProps[];
	activeStep: number;
}

const StepContent = ({ stepContent, activeStep }: ContentProps) => {
	return (
		<>
			{stepContent.map(({ component: Component, props }, index) => {
				return (
					<Component key={index} style={{ display: activeStep === index ? 'inherit' : 'none' }} {...props} />
				);
			})}
		</>
	);
};

Here’s an example of what the array of StepContentProps looks like:

const stepContent: StepContentProps[] = [
		{
			component: MaterialTable,
			props: {
				title: 'Users',
				columns: userColumns as Column<User | Inventory>[],
				data: users,
				options: { selection: true, filtering: true, tableLayout: 'auto' },
				onSelectionChange: (rows) => {
					setSelectedUsers(rows);
				},
			} as MaterialTableProps<User>,
		}
]

[nico-hernandez]

@kevinvugts The horizontal stepper doesn’t have this notion, so I think that you are looking at the wrong place.

What would be the solution for the Horizontal Stepper? Is there a way I could prevent the unmounting components?

Did you get any solution? I’ve been trying with vertical and horizontal stepper and TransitionProps={{ unmountOnExit: false }} but it doesn’t work, content is unmounted and mounted back, and selections/input data are no preserved.

[oliviertassinari]

@kevinvugts Are you using the vertical stepper? I think that the behavior is correct. You will find #10569 for developers advocating for the current behavior. I’m reopening as, after all, we might benefit from documentation about it. The following should be enough:

diff --git a/docs/src/pages/components/steppers/steppers.md b/docs/src/pages/components/steppers/steppers.md
index 34004243f6..25a8c6c373 100644
--- a/docs/src/pages/components/steppers/steppers.md
+++ b/docs/src/pages/components/steppers/steppers.md
@@ -70,6 +70,16 @@ Vertical steppers are designed for narrow screen sizes. They are ideal for mobil

 {{"demo": "pages/components/steppers/VerticalLinearStepper.js"}}

+### Performance
+
+The content of a step is unmounted when closed.
+If you need to make the content available to search engines or render expensive component trees inside your modal while optimizing for interaction responsiveness
+it might be a good idea to keep the step mounted with:
+
+```jsx
+<StepContent TransitionProps={{ unmountOnExit: false }} />
+```
+
 ## Mobile stepper

 This component implements a compact stepper suitable for a mobile device. It has more limited functionality than the vertical stepper. See [mobile steps](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) for its inspiration.

What do you think about it? Do you want to open a pull request?