React-redux: Warning: useLayoutEffect does nothing on the server

[jaybe78]

Do you want to request a _feature_ or report a _bug_? Bug

What is the current behavior?
I'm getting the following warning whereas I'm not using "useLayoutEffect" hook anywhere in my code.

react-dom-server.browser.development.js:104 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://fb.me/react-uselayouteffect-ssr for common fixes.
    in ConnectFunction
    in ConnectFunction
    in Route
    in withRouter(Connect(Base))
    in Router
    in BrowserRouter
    in Context.Provider
    in IntlProvider
    in Context.Consumer
    in withIntl(IntlProvider)
    in Context.Provider
    in ConnectFunction
    in ConnectFunction
    in Context.Provider
    in CookiesProvider
    in Context.Provider
    in Provider
    in Context.Provider
    in ApolloProvider

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to a CodeSandbox (https://codesandbox.io/s/new) or RN Snack (https://snack.expo.io/) example below:

please download repo from
https://github.com/jaybe78/reat-redux-warning-uselayouteffect-issue

npm install
npm run dev
http://localhost:3000/sign-in
Issue is thrown out in the logs

What is the expected behavior?

I should not get any warning if I don't use useLayoutEffect in my code

Which versions of React, ReactDOM/React Native, Redux, and React Redux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of React Redux?

"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0",
"redux": "^4.0.4",

[markerikson]

We use useLayoutEffect() inside of connect. We try to do some feature detection to figure out if we're in an SSR environment or not, but this doesn't always work depending in your setup:

https://github.com/reduxjs/react-redux/blob/4b9cecefde7b3e4c6344d3277c46ad0471c4bbfe/src/components/connectAdvanced.js#L35-L45

See https://github.com/facebook/react/issues/14927 for more details.

[sketchbuch]

If you just want to supress the message in the test file that tests the SSR rendering you can overwrite the error log:

describe('A series of tests', () => {
  const originalConsoleError = console.error;

  beforeEach(() => {
    console.error = jest.fn((msg) => {
      if (msg.includes('Warning: useLayoutEffect does nothing on the server')) {
        return null;
      } else {
        originalConsoleError(msg);
      }
    });
  });

  afterEach(() => {
    console.error = originalConsoleError;
  });

  // Your tests...
});