How to use the react-dom.hydrate function in react-dom

const resolver = new Resolver(
    createRelayEnvironment(
      // eslint-disable-next-line no-underscore-dangle
      new RelayClientSSR(window.__RELAY_PAYLOADS__),
      '/graphql',
    ),
  );

  const Router = await createInitialFarceRouter({
    historyProtocol: new BrowserProtocol(),
    historyMiddlewares,
    routeConfig,
    resolver,
  });

  ReactDOM.hydrate(
    ,
    document.getElementById('root'),
  );
})();

function renderReactElement(reactEl, domEl) {
      // The check for `.hydrate` is there to support React alternatives like preact
      if (
        serverRender &&
        isInitialRender &&
        typeof ReactDOM.hydrate === 'function'
      ) {
        ReactDOM.hydrate(reactEl, domEl)
        isInitialRender = false
      } else {
        ReactDOM.render(reactEl, domEl)
      }
    }

primary: green,
    accent: red,
    type: 'light'
  }
});

// React Mount Tag
const mountNode = document.getElementById('app');

// Apollo Client
const apolloClient = createApolloClient();

// Same as render(), but is used to hydrate a container whose HTML contents were rendered by ReactDOMServer.
// React will attempt to attach event listeners to the existing markup.
// https://reactjs.org/docs/react-dom.html#hydrate
ReactDOM.hydrate(
  
    
      
        
      
    
  ,
  mountNode
);

// Easy-to-use library for eliminating the 300ms delay between a
// physical tap and the firing of a click event on mobile browsers
FastClick.attach(document.body);

// Remove the server-side inject CSS
const jssStyles = document.getElementById('jss-server-side');

}

		const initialData = getClientInitialData();
		setIsProd(initialData.locationData.isPubPubProduction);

		if (!isLocalEnv(window)) {
			setupKeen();
			window.sentryIsActive = true;
			Sentry.init({ dsn: 'https://abe1c84bbb3045bd982f9fea7407efaa@sentry.io/1505439' });
			Sentry.setUser({
				id: initialData.loginData.id,
				username: initialData.loginData.slug,
			});
		}

		hydrate(, document.getElementById('root'));
	}
};

import React from 'react';
import ReactDOM from 'react-dom';
import Page from './page';

let App = Page;
if ('__REACT_SSR_DEVELOPMENT__') {
  const { hot } = require('react-hot-loader/root');
  App = hot(Page);
}

const props = JSON.parse('__REACT_SSR__');

ReactDOM.hydrate(, document.getElementById('app'));

onPageLoad((_sink) => {
  ReactDOM.hydrate(
    
      
        
      
    ,
    document.getElementById('react-root'),
  );
});

import Layout from '../containers/layout';
import React from 'react';
import ReactDOM from 'react-dom';
import {extractLayoutProps} from '../helpers/props';


const propsTarget = document.getElementById('props');
const props = propsTarget ? JSON.parse(propsTarget.innerHTML) : {};

const markup = (
	
		
	
);

ReactDOM.hydrate(markup, document.getElementById('target'));

Loadable.preloadReady().then(() => {
  hydrate(
    
      
        
          {state.mobile === null ?  :  }
        
      
    ,
    document.querySelector('#app')
  )
})

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { ApolloProvider } from 'react-apollo';
import { HelmetProvider } from 'react-helmet-async';
import App from 'routes/App';
import client from './apolloClient';

ReactDOM.hydrate(
  
    
      
        
      
    
  ,
  document.getElementById('main')
);

document.addEventListener('DOMContentLoaded', async () => {
  const state = (window as any).__rehydratedState
  const context = app.createContext()
  withReduxDevTools(context)
  ;(window as any).context = context

  context.rehydrate(state)
  await context.executeOperation(restoreNavigateOp)

  ReactDOM.hydrate(
    
      
        
      
    ,
    document.querySelector('.todoapp'),
  )
})