[v4] "Warning: useLayoutEffect does nothing on the server" when using SSR

[finkrer]

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 Input (/node_modules/react-date-picker/dist/DateInput/Input.js:118:24)
    at YearInput (/node_modules/react-date-picker/dist/DateInput/YearInput.js:31:22)
    at div
    at DateInput (/node_modules/react-date-picker/dist/DateInput.js:232:5)
    at div
    at div
    at DateRangePicker (/node_modules/@wojtekmaj/react-daterange-picker/dist/DateRangePicker.js:93:5)

[wojtekmaj]

That's new for me, but I'm not surprised too much. It was introduced in wojtekmaj/react-date-picker@4de8245 and the reason for this effect is to apply CSS width to an input based on its content width. If we use useEffect here, the UI jumps for a split second because the measurements are done too late.

[finkrer]

Could you then make the component only render on the client, as the React devs recommend? Should make no difference in terms of behavior.

The warning spam kinda makes it impossible to work, I had to downgrade the package for now.

[wojtekmaj]

Sorry, which parts of the docs, or which post, are you referring to?

[finkrer]

Sorry, I should've highlighted that. The error message links to this page: https://reactjs.org/link/uselayouteffect-ssr

[wojtekmaj]

Thanks!

Neither of these options are appealing to me.

• Converting to useEffect is out of question for the reasons described above
• "Lazy loading" component effectively breaks SSR rendering of the component which, aside from the measurements that must be done in the browser, is perfectly fine to render server side.

The only solution that makes any sense to me is this one - I'll go with this.

[wojtekmaj]

Fixed via wojtekmaj/react-date-picker@e95da80 - will be resolved with the next React-Date-Picker release. Note: React-DateRange-Picker will not update React-Date-Picker automatically - you'll have to update it yourself e.g. using yarn up react-date-picker -R, reinstall React-DateRange-Picker, or wait for the next React-DateRange-Picker update that bumps minimum React-Date-Picker version.

[wojtekmaj]

you'll have to update it yourself e.g. using yarn up react-date-picker -R, reinstall React-DateRange-Picker

@wojtekmaj Perhaps you mean yarn upgrade react-date-picker -R ?

For legacy versions of Yarn, as far as I can remember, the command you proposed would be correct. :)