useWindowScroll is SSR incompatible

[ivan-kleshnin]

What package has an issue

@mantine/hooks

Describe the bug

https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-window-scroll/use-window-scroll.ts#L10
relies on direct window checks, should be hidden behind useEffect.

In which browser did the problem occur

Any

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No response

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

Related thread on SO: https://stackoverflow.com/questions/57230099/react-ssr-proper-way-of-handling-page-scroll-position

[brunocrosier]

do you have a repro for this?

[brunocrosier]

from what i can see, this hook works as intended on the client and server:

https://codesandbox.io/s/brave-yonath-4rxbje?file=/pages/index.js

[ivan-kleshnin]

As I remember it "works" but triggers well known "hydration mismatch" warning. SSR compatible code must not have if (window...) like conditions. I don't have a repo around, sorry. I've switched to Chakra and removed related Mantine playgrounds 😅

[brunocrosier]

As I remember it "works" but triggers well known "hydration mismatch" warning. SSR compatible code must not have if (window...) like conditions. I don't have a repo around, sorry. I've switched to Chakra and removed related Mantine playgrounds 😅

where do you see the hydration mismatch exactly ? unfortunately i can't see this error it in the codesandbox demo (i looked in the server and client console). if i can see the error, i will investigate and fix it.

[rtivital]

Fixed in 5.1.4, for this and other similar hooks – initial value is not set in useEffect