Material UI:Flickering on the initial load of the page(Razzle)

This is caused by your client side code removing the server generated styling before the client styling has been generated.

The hydrate function provided by react-dom has a 3rd parameter which is a callback function that is called after hydration of the app is complete.

This callback function should be used to ensure that the app has completed hydration and has generated the client styling.

import React,{useEffect} from 'react';import { hydrate } from 'react-dom';import {theme} from '../theme';import { ThemeProvider } from '@material-ui/styles';import { Provider } from 'react-redux';import configureStore from '../common/store/configureStore';import App from '../common/containers/App';import { BrowserRouter } from "react-router-dom";import "../common/assets/SCSS/app.scss";import * as serviceWorker from '../serviceWorker';import CssBaseline from '@material-ui/core/CssBaseline';const store = configureStore(window.__PRELOADED_STATE__);const Client = () => {  return(    <Provider store={store}>      <ThemeProvider theme={theme}>        <CssBaseline />        <BrowserRouter>          <App />        </BrowserRouter>      </ThemeProvider>    </Provider>  );}hydrate(    <Client />,    document.getElementById('root'),    () => {        const jssStyles = document.querySelector('#jss-ssr');        if (jssStyles) {            jssStyles.parentElement.removeChild(jssStyles);        }    });