avoid warning if using usePreventScroll on server

[dferber90]

The problem

When a component using usePreventScroll gets rendered on the server, it would emit a warning like

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.

This happened as useLayoutEffect is being run on the server.

This leads to questions like https://stackoverflow.com/questions/64622494/usepreventscroll-causes-uselayouteffect-warning-in-nextjs/64623138.

The solution

To avoid the warning on the server, we can fall back to useEffect in server environments. This gets rid of the error and should have no effects on the behaviour.

I skipped the PR template as this is quite a small change where I applied a quite common solution. So it didn't seem worth the overhead. Hope that's okay!

Closes

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

• use the usePreventScroll hook in a component that gets rendered on the server (e.g. in Next.js)
• then check the server console log

Before this fix, you'd see a warning. After this fix, the warning is gone. ☮️

[dferber90]

I made this change using the GitHub UI after testing it locally. Feel free to just close this PR and bring this fix home separately as the lint step is failing atm.

Thanks for making react-spectrum open source, it's such a joy to use!

[snowystinger]

Hey! thanks for the contribution, one quick question

[snowystinger]

Could you try with import {chain, getScrollParent, useLayoutEffect} from '@react-aria/utils';? It should do a roughly similar thing https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/utils/src/useLayoutEffect.ts
Maybe it needs updating to this? I don't know quite enough about SSR personally.

[dferber90]

That works as well. Done 👍