Question: I am using NextJS with Material UI and Apollo. Although, everything is working properly but the warning is not going. It seems to me that a lot of Material UI components are using **useLayoutEffect** which is warned by React. The error is below.

> 
> Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See fb.me/react-uselayouteffect-ssr for common fixes.
> 
> 
>

Answer: 
The problem is solved. I was suspecting it occurred for Material UI but it is actually happening for Apollo. I am posting the solution here to let others know.

in Apollo configuration file I needed to say the application is using Server Side Rendering. Please check the code below. If you are not using TypeScript then just remove the Types. In the last line `{ getDataFromTree: 'ssr' }` object solved the issue. I hope it will help you.

```
import { InMemoryCache } from 'apollo-cache-inmemory';
import ApolloClient from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import withApollo from 'next-with-apollo';

type Props = {
  ctx?: {};
  headers?: {};
  initialState?: {};
};

const createClient = ({ ctx, headers, initialState }: Props) =>
  new ApolloClient({
    cache: new InMemoryCache().restore(initialState || {}),
    link: createHttpLink({ uri: process.env.API_ENDPOINT })
  });

export default withApollo(createClient, { getDataFromTree: 'ssr' });

```
I had the same problem using jest, enzyme and Material UI, but I was not using Apollo. If you encounter this problem using Material UI, a simple work around is to add to your test config file (src/setupTests.js) the following:

```js
import React from 'react';

React.useLayoutEffect = React.useEffect;

```

Sources: [here](https://kentcdodds.com/blog/useeffect-vs-uselayouteffect) and [here](https://stackoverflow.com/questions/58070996/how-to-fix-the-warning-uselayouteffect-does-nothing-on-the-server) and [here](https://reactjs.org/docs/hooks-reference.html#uselayouteffect).

Otherwise, if your stack includes Apollo, you could [try](https://stackoverflow.com/a/57355482/6448624)