responsive handling with display: none

I'm trying to understand if using the css property display: none with media queries is a safe approach to display different layouts between mobile and desktop. I'm using react and material-ui for my frontend and as my layouts have become more complex, I've found that setting the display property to none is an "easy" approach to display specific layouts for various screen sizes.

With regards to SSR, I think this is a safer approach than using the useMediaQuery hook. I understand that I may give up performance because no matter what the size screen is, both mobile and desktop components are called on render.

Should I be considering anything else besides performance (and using a class based component) as a potential pitfall to this approach?

import React from 'react';
import { withStyles } from '@material-ui/core';
import Mobile from './components/Mobile';
import Desktop from './components/Desktop';


const styles = theme => ({
  hideOnMobile: {
    // max-width media query between 0 and md
    [theme.breakpoints.down('sm')]: {
      display: 'none'
    }
  },
  hideOnDesktop: {
    // min-width media query from md and up
   [theme.breakpoints.up('md')]: {
      display: 'none'
    }
  }
});


class ResponsiveComponent extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <div>
        <div className={classes.hideOnMobile}>
          <Desktop />
        </div>
        <div className={classes.hideOnDesktop}>
          <Mobile />
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(ResponsiveComponent);