Material UI. Show different components depending on breakpoints (SSR)

Question

On small devices (phones) I want to show <Foo/> component and on large (desktops) <Bar/>, like this

function MyComp (props) {
   if (isMobile) 
        return <Foo/>
   else 
        return <Bar/>
    }
}

I could find only 2 possible ways to implement it in Material UI :

• Using Hidden component
• Using withWidth HOC

Option with HOC seemed to me more correct in this case, but apparently it doesn't work correctly with SSR (but Hidden does).

So is it OK in terms of best practices to use two Hidden elems? Like this:

function MyComp (props) {

  return (
    <>
      <Hidden mdUp implementation="css">
        <Foo/>
      </Hiddne>
      <Hidden smDown implementation="css">
        <Bar/>
      </Hidden>
    </>

  )
}

Answer 1

There is no problem in using <Hidden /> like that, it just adds a <div> with the necessary CSS to show or not your component. A better approach though would be to add a CSS class directly to your <Foo /> and <Bar /> components, to avoid extra <div> in your page, like this:

function MyComp (props) {

  return (
    <>
        <Foo className={props.classes.foo} />
        <Bar className={props.classes.bar} />
    </>
  )
}

The implementation="css" is necessary in SSR setups because the JS implementation may "flash" the component on the page, then remove it when JS has loaded. The downside of the CSS implementation is that the element is kept in the DOM.

PS: withWidth will be deprecated.