Select mode="multiple" throws useLayoutEffect warning in Next.js #30396
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link
Steps to reproduce
Reproduce locally
npx create-next-app nextjs-antd-select-bug
cd nextjs-antd-select-bug
npm install antd
npm run dev
Edit pages/index.js
import {Select} from "antd";
import "antd/dist/antd.css";
export default function Page() {
return (
<div>
<Select
mode="multiple"
style={{width: "300px"}}
>
<Select.Option value="A">Option A</Select.Option>
<Select.Option value="B">Option B</Select.Option>
</Select>
</div>
)
}Open http://localhost:3000/
The warning is logged in the server console with every page refresh
Reproduce on Codesandbox
- Open https://codesandbox.io/s/awesome-moser-wr83y
- Hit Refresh button in the Browser panel
- The warning is logged in the Terminal log
What is expected?
No exceptions or warnings are expected.
What is actually happening?
The following warning is logged upon every single page refresh.
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. Toavoid this, useLayoutEffect should only be used in components that renderexclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
at Overflow (/sandbox/node_modules/rc-overflow/lib/Overflow.js:35:32)
at SelectSelector (/sandbox/node_modules/rc-select/lib/Selector/MultipleSelector.js:36:18)
at div
at Selector (/sandbox/node_modules/rc-select/lib/Selector/index.js:36:35)
at Trigger (/sandbox/node_modules/rc-trigger/lib/index.js:79:36)
at SelectTrigger (/sandbox/node_modules/rc-select/lib/SelectTrigger.js:66:25)
at div
at Select (/sandbox/node_modules/rc-select/lib/generate.js:88:34)
at Select (/sandbox/node_modules/rc-select/lib/Select.js:95:34)
at InternalSelect (/sandbox/node_modules/antd/lib/select/index.js:55:31)
at div
at Page
at App (webpack-internal:///./node_modules/next/dist/pages/_app.js:31:1)
at AppContainer (/sandbox/node_modules/next/dist/next-server/server/render.js:28:859)
| Environment | Info |
|---|---|
| antd | 4.15.4 |
| React | 17.0.2 |
| System | macOS Big Sur 11.3 |
| Browser | Safari 14.1 |