Warning: useLayoutEffect does nothing on the server, because its effect cannot […]

Version 4 of <ButtonBase> now incorporates useLayoutEffect() in the src code here. This wasn’t present in version 3.

I understand the need for it however every jest test for a component that has a <Button> within it now results in console warnings like so:

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 ForwardRef(ButtonBase)
          in WithStyles(ForwardRef(ButtonBase))
          in ForwardRef(Button)
          in WithStyles(ForwardRef(Button)) (at ButtonWithIcon/index.tsx:57)
          in Layout (at ButtonWithIcon/index.tsx:26)
          in ButtonWithIcon (at OAuthButton/index.tsx:58)
          in Layout (at OAuthButton/index.tsx:21)
          in OAuthButton (at OAuthSignUp.tsx:221)
          in div (at OAuthSignUp.tsx:200)
          in Layout (at OAuthSignUp.tsx:138)
          in OAuthSignUp (at OAuthSignUp.unit.test.tsx:60)
          in Context.Provider
          in ThemeProvider (at testProviders.tsx:29)
          in Context.Provider (at store.tsx:36)
          in Provider (at testProviders.tsx:28)
          in Providers (at OAuthSignUp.unit.test.tsx:59)

The tests still pass as it’s just a warning, but is there any way to prevent these warning messages from appearing? I literally can’t even see all the warnings in my terminal as there are so many.

[oliviertassinari]

Ok found it. We can close this issue. You can reproduce the problem without Material-UI:

import React from "react";

const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;

function MadeWithLove() {
  useEnhancedEffect(() => {});

  return (
    <span>
      {"Built with love by the "}
    </span>
  );
}

The problem is that next-with-apollo traverse the tree, by default, on the browser with the server side API:

• https://github.com/lfades/next-with-apollo/blob/edb04a8cedf328d462b5d81c8d740e85ced73ab1/src/withApollo.tsx#L67
• https://github.com/apollographql/react-apollo/blob/fff08ff5d6b599a9ed1be6fcc171519e6c22cae1/src/getDataFromTree.ts#L107

I have used Apollo extensively for more than a year at onepixel.com. I would be cautious with it, it can be slow at scale, it was our bottleneck n°1 from a performance perspective (graphql + apollo client). I believe you don’t need to traverse the React tree with the server side API on the client when switching routes. You can have loaders or a centralized getInitialProps logic instead.

[ndeviant]

@oliviertassinari yeah, totally. Thats would be great!