useLayoutEffect does nothing on the server

During SSR 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.

The code producing it:

overflow/src/Overflow.tsx

Line 151 in 58885d1

React.useLayoutEffect(() => {

I have this same issue with antd + next.js.

@afc163 can you please look into it and change it to like

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

Experiencing the same issue with react-component/select. I see the issue is already reported there, but it's actually caused by react-component/overflow. It makes the library harder to use, because the warnings pollute the console. 😕

By the way, devs at react-component/select avoid calling useLayoutEffect in the server, using this function.

Same issue with antd + next.js:
"antd": "4.16.3",
"react": "17.0.2",
"next": "11.0.0".

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. at Overflow (.../node_modules/rc-overflow/lib/Overflow.js:42:32) at InheritableContextProvider (.../node_modules/rc-menu/lib/context/MenuContext.js:39:23) at Menu (.../node_modules/rc-menu/lib/Menu.js:76:32) at InternalMenu (.../node_modules/antd/lib/menu/index.js:73:37) at Menu (.../node_modules/antd/lib/menu/index.js:165:37) at Nav at Layout (webpack-internal:///./components/Layout.js:15:3) at MyApp (webpack-internal:///./pages/_app.js:32:3) at AppContainer (.../node_modules/next/dist/next-server/server/render.js:27:952)

@afc163 fix it please...

I'm having this issue as well with rc-menu, and not using antd.

@zombieJ

Same issue:

antd@4.16.11
react@17.0.2
next@11.1.0

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.
    at Overflow (/Users/chenriques/Documents/proj/node_modules/rc-overflow/lib/Overflow.js:42:32)
    at InheritableContextProvider (/Users/chenriques/Documents/proj/node_modules/rc-menu/lib/context/MenuContext.js:39:23)
    at Menu (/Users/chenriques/Documents/proj/node_modules/rc-menu/lib/Menu.js:76:32)
    at InternalMenu (/Users/chenriques/Documents/proj/node_modules/antd/lib/menu/index.js:73:37)
    at Menu (/Users/chenriques/Documents/proj/node_modules/antd/lib/menu/index.js:166:37)
    at AppMenu
    at div
    at aside
    at /Users/chenriques/Documents/proj/node_modules/antd/lib/layout/Sider.js:74:31
    at section
    at BasicLayout (/Users/chenriques/Documents/proj/node_modules/antd/lib/layout/layout.js:93:34)
    at Adapter (/Users/chenriques/Documents/proj/node_modules/antd/lib/layout/layout.js:61:37)
    at AppLayout (webpack-internal:///./components/Layout/AppLayout.tsx:20:3)
    at Home
    at MyApp (webpack-internal:///./pages/_app.tsx:25:3)
    at AppContainer (/Users/chenriques/Documents/proj/node_modules/next/dist/server/render.js:338:29)

PS: I'm not using SSR, so it must be caused by Next Static Generation of all pages by default.

Hello, I am having the same issue using ant design, the warning is produced by "rc-menu" that ant design uses internally.

I am facing the same issue but unable to fix it

This bug will soon be ONE YEAR old 👍

Experienced this today. If you're using nextjs you can always render it on the client using dynamic imports

Example:

import dynamic from "next/dynamic";
const DynamicAntdSelect = dynamic(() => import('antd').then(mod => mod.Select), { ssr: false });

Source: https://nextjs.org/docs/advanced-features/dynamic-import

Experienced this today. If you're using nextjs you can always render it on the client using dynamic imports

Example:
import dynamic from "next/dynamic";
const DynamicAntdSelect = dynamic(() => import('antd').then(mod => mod.Select), { ssr: false });
Source: https://nextjs.org/docs/advanced-features/dynamic-import

thanks! i tried this but got another error in console saying

Warning: `children` should be `Select.Option` or `Select.OptGroup` instead of `[object Object]`.

even though I imported it similarly like:

const DynamicAntSelectOption = dynamic(() => import('antd').then(mod => mod.Select.Option), { ssr: false });

To anyone facing this issue... Until this is fixed in the upstream packages, this is what you can do:

Today I used patch-package to patch rc-overflow@1.2.2 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/rc-overflow/lib/Overflow.js b/node_modules/rc-overflow/lib/Overflow.js
index 0fce60c..bc2c0c4 100644
--- a/node_modules/rc-overflow/lib/Overflow.js
+++ b/node_modules/rc-overflow/lib/Overflow.js
@@ -202,7 +202,9 @@ function Overflow(props, ref) {
     return itemWidths.get(getKey(mergedData[index], index));
   }
 
-  React.useLayoutEffect(function () {
+  var useIsomorphicEffectPatched = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+  useIsomorphicEffectPatched(function () {
     if (mergedContainerWidth && mergedRestWidth && mergedData) {
       var totalWidth = suffixWidth;
       var len = mergedData.length;

This issue body was partially generated by patch-package.

@jimfilippou @ahmad-reza619 But that would just be avoiding the SSR problem. I'm using Menu from antd as a top navigation, and I want it to be SSR.

Im +1 for a fix

+1 for a fix

try: +1 for a fix

antd@4.16.11
react@17.0.2
next@11.1.0

 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 avo
id this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
[0]     at Overflow (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-overflow\lib\Overflow.js:42:32)
[0]     at SelectSelector (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-select\lib\Selector\MultipleSelector.js:36:18)
[0]     at div
[0]     at Selector (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-select\lib\Selector\index.js:36:35)
[0]     at Trigger (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-trigger\lib\index.js:79:36)
[0]     at SelectTrigger (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-select\lib\SelectTrigger.js:66:25)
[0]     at div
[0]     at Select (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-select\lib\generate.js:88:34)
[0]     at Select (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-select\lib\Select.js:95:34)
[0]     at InternalSelect (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\select\index.js:55:31)
[0]     at I (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\styled-components\dist\styled-components.cjs.js:1:19220)
[0]     at Select (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:104900:5)
[0]     at C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\form\FormItem.js:78:23
[0]     at C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\form\FormItem.js:78:23
[0]     at div
[0]     at div
[0]     at div
[0]     at C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\grid\col.js:59:33
[0]     at FormItemInput (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\form\FormItemInput.js:44:25)
[0]     at div
[0]     at C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\grid\row.js:56:34
[0]     at Field (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-field-form\lib\Field.js:66:34)
[0]     at WrapperField (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-field-form\lib\Field.js:569:20)
[0]     at FormItem (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\form\FormItem.js:93:20)
[0]     at form
[0]     at Form (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-field-form\lib\Form.js:31:19)
[0]     at SizeContextProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\config-provider\SizeContext.js:19:23)
[0]     at InternalForm (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\form\Form.js:66:27)
[0]     at div
[0]     at I (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\styled-components\dist\styled-components.cjs.js:1:19220)
[0]     at div
[0]     at I (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\styled-components\dist\styled-components.cjs.js:1:19220)
[0]     at InternalFilter (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\analysis\leakages-service.js:114407:3)
[0]     at Filter
[0]     at ServiceAnalysisFilter (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\analysis\leakages-service.js:110105:5)
[0]     at div
[0]     at aside
[0]     at C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\layout\Sider.js:74:31
[0]     at I (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\styled-components\dist\styled-components.cjs.js:1:19220)
[0]     at section
[0]     at BasicLayout (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\layout\layout.js:93:34)
[0]     at Adapter (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\layout\layout.js:61:37)
[0]     at section
[0]     at BasicLayout (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\layout\layout.js:93:34)
[0]     at Adapter (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\layout\layout.js:61:37)
[0]     at I (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\styled-components\dist\styled-components.cjs.js:1:19220)
[0]     at PrivateLayout (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:111260:3)
[0]     at Leakages (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\analysis\leakages-service.js:124238:75)
[0]     at BreadcrumbComp (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:108338:75)
[0]     at ComponentWithError (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:114933:17)
[0]     at BreadcrumbProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:108239:3)
[0]     at HistoryProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:114205:3)
[0]     at PopupProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\react-popup-manager\dist\src\PopupProvider.js:24:28)
[0]     at UserProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:105501:3)
[0]     at Provider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:116642:24)
[0]     at DakotaProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:97183:12)
[0]     at FormProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-field-form\lib\FormContext.js:26:31)
[0]     at LocaleProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\locale-provider\index.js:45:37)
[0]     at ProviderChildren (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\config-provider\index.js:99:24)
[0]     at LocaleReceiver (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\locale-provider\LocaleReceiver.js:39:37)
[0]     at ConfigProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\config-provider\index.js:206:13)
[0]     at exports.ThemeProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\styled-components\dist\styled-components.cjs.js:1:24917)
[0]     at App (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:113957:5)
[0]     at I18nProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\next-translate\lib\cjs\I18nProvider.js:44:18)
[0]     at AppWithTranslations (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\next-translate\lib\cjs\appWithI18n.js:65:92)
[0]     at ae (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\styled-components\dist\styled-components.cjs.js:1:13296)
[0]     at AppContainer (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\next\dist\server\render.js:293:29)

Same issue here, a fix would be very desirable.

+1 for a fix.
using:

"react": "^17.0.2",
"antd": "^4.15.2",
"next": "^12.3.3",

Using HeadlessUI and Next 13, I still get this error:

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.

@afc163 can you please look into it and change it to like
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

In case useful to others, this suggestion works perfectly you are using Next 13, with React Server Components (RSC) and React Client Components (RCC), and getting this error due to useLayoutEffec inside a RCC.