mantinedev
useWindowScroll is SSR incompatible
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
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
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 😅
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.
Fixed in 5.1.4, for this and other similar hooks – initial value is not set in useEffect
