search

onderonur / react-intersection-observer-hook

React hook to use IntersectionObserver declaratively.
https://onderonur.github.io/react-intersection-observer-hook/
MIT License
74 stars 7 forks source link

No visibility tracking with react 18 #16

Closed fdutey closed 2 years ago

fdutey commented 3 years ago

Hi,

I know it's a bit early to dive into React 18 since it's only in alpha but I have to use it because of relay routing and concurrent mode. Moving to this alpha version happened to break useInfiniteScroll. With (painful) debugging in console, the further I could go is in this package and I saw that the IntersectionObserver callback was never called. I tried to use this package directly instead of useInfiniteScroll, see if I would have better luck but it didn't work either.

I was wondering if React concurrent mode completely broke with IntersectionObserver (since ReactDOM initialization is done in a different way now) but following this tutorial, I was able to put it back on track. I had to remove the ref from the dependencies of useEffect to make it work though, leading to delete / recreate my observer on every render. Twice actually, because of "double render effect", but at least it works.

I don't know exactly what's going on with intersectionObserverHook but just so you know, it breaks.

Have a good one ;)

onderonur commented 2 years ago

Hi there 👋 First of all, thanks for the heads up. I didn't use React 18 before and don't have much idea about how the concurrent mode is working under the hood. I guess I'm waiting for the stable version of those 😄 I will definitely check this when the time comes. Thanks 🙏

onderonur commented 2 years ago

Hi again 👋 After the release of React 18 I finally checked this. It was caused by the new StrictMode features of React 18. Each component gets unmounted and mounted again to check if something gets broken to be sure everything will work with next features of React (like keeping state preserved for unmounted component etc.). I will publish the fix in a short term I hope. But I need to try some cases first. Thanks! This issue was really helpful actually.

Update: Thanks to @seonghyeonkimm this issue is actually fixed in a PR. I'm gonna publish a new version soon.