Best practice of setting props depending on breakpoints

Discussed in https://github.com/mui-org/material-ui/discussions/29318

^{Originally posted by mwskwong October 27, 2021}
For example, I want to display a Button and set fullWidth={true} while displaying in mobile devices (i.e. smDown) and false if otherwise. I can think of two ways to implement it.

1. Use useMediaQuery. The pros are the code will be more elegant, while the issue is it doesn't work very well with SSR. Youn will notice a layout shift in certain cases.

2. Mount two Button, one with fullWidth set to true and the other one set to false, and then set the CSS attribute display depending on the breakpoint. The pros are it supports SSR very well., While the cons are you have to duplicate the component, which is not so great for performance and SEO.

Now the question is, which one do you prefer? Or are there better ways to achieve this?

Start with the linked discussion and compare the two approaches described: useMediaQuery with SSR versus mounting two Button components with breakpoint-based display. Determine whether the desired outcome is a documented recommendation or a new responsive API, then define acceptance criteria for the chosen approach and its SSR behavior.