Redux-toolkit: RTKQ: Warning with NextJs

[OscarVelandia]

Hi, with NextJs I have this warning

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 https://reactjs.org/link/uselayouteffect-ssr for common fixes.

But with the "@rtk-incubator/rtk-query": "^0.3.0" it doesn't happens.

My dependencies are:

   "@reduxjs/toolkit": "^1.6.0",
    "next": "10.2.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-redux": "^7.2.4",

And my _app.tsx configuration is:

import '../styles/globals.scss';
import type { AppProps } from 'next/app';
import { Provider } from 'react-redux';
import { store } from '@store';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
      <div id="modal-root" />
    </Provider>
  );
}
export default MyApp;

[markerikson]

This warning is unfortunately React being over-zealous. It warns you about any use of useLayoutEffect in a server environment, to try to let you know that the effect won't actually get run:

https://github.com/facebook/react/issues/14927

We do appear to have one use of useLayoutEffect in this codebase. We'll have to see if we can tweak it to use React-Redux's useIsomorphicLayoutEffect instead, to avoid this issue.