I found out that Strict Effect is added to React.StrictMode in react 18
It triggers useEffect is run twice in development environment. So, when react strictMode is enabled, this hook is not working as expected. Because useEffect calls only unobserve when component unmounts and does not call observe when component re-mounts.
React team says code should be fine even if it mounts and unmounts couple of times. They also say useEffect might be called and useEffect destructor might be called too when user go to another tab or somthing. I think it is related to offscreen api. So, I thought this hook also should be written in the way they suggest.
The above is why I made this pr. Please check out this pr.
I didn't give much attention to React 18 until it's released.
After the release, this issue got high priority. So thanks for your efforts and nice description of the cause!
Descriptions
React.StrictMode
in react 18