useMeasure: React18 Support (Suspense boundary breaks when using the hook)

[karanpvyas]

What is the current behavior? On using useMeasure it is giving the below error with React18 (with server side rendering) Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

This is happening because of using setState for "refs"

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-use. Paste the link to your JSFiddle or CodeSandbox example below: https://codesandbox.io/s/poc-hydration-error-skz31g?file=/pages/index.js

What is the expected behavior? There should be no Suspense Hydration Error

A little about versions:

• OS:
• Browser (vendor and version):
• React: 18.0.2
• react-use: 17.4.0
• Did this worked in the previous package version? No

[arnaugomez]

I would like to contribute to this issue, give me some time and I'll look for a fix

[arnaugomez]

@karanpvyas I solved the issue! I am going to make a PR soon. This is my first contribution to GitHub so I am very new to this. But I will try my best.

[arnaugomez]

@karanpvyas I created a PR that solves your problem