Run & review this pull request inStackBlitz Codeflow.

Thanks alot for putting in the work on these features.

React 19 Ref
I had considered if it was worth doing a refactor to use the new cleanup - But, I don't think we can't just drop support for React 18.
It would be interesting to look into supporting both paths, depending on the version of React that's being used. Minor size increase to the package, but would cut the rerenders down for React 19 users.

Fallback support
Browsers have supported theIntersectionObserver for a long time, so in theory the fallback should not be needed.

• One of the reasons it was added in the first place was because some browsers (usually Safari), would just reject the observers on some devices. This might not be an issue anymore.
  • See:Can't find variable: IntersectionObserver #495
• Another reason, is to facility testing in JSDom environments, by adding a default logic.

Am I correct in understanding, that it only removes the extra re-renders if using theuseOnInViewChanged?

The latest updates on your projects. Learn more aboutVercel for Git ↗︎

Thank you for your quick reply

Am I correct in understanding, that it only removes the extra re-renders if using theuseOnInViewChanged?

CorrectuseInView is no longer callingobserve - instead it callsuseOnInViewChanged (which callsobserve)
TheuseInView react 19 version has only the booleaninView state - therefore it does no longer rerender to store the element ref

useOnInViewChanged is stateless but requires react 19

What would thedependencies be? Doesn't seem like it's needed?

Good catch - changing the dependencies will destroy the observer and create it once again.
However you are right there is no real use case because of the ref for the callback - I removed it

React 18 support

I can think of these three options:

1. Manual Opt-in by installing a different major version using a specific npm packages tag e.g.npm i react-intersection-observer@next for react 19

2. Manual Opt-in by explicitly importing the react19 version (might be problematic because of auto imports)
   import { useInView } from "react-intersection-observer/react19";

3. Auto detection (doubles the hook size)

import{version}from"react"import{useInView18}from"./useInView18";import{useInView19}from"./useInView19";exportconstuseInView:typeofuseInView18=version.startsWith("19") ?useInView19 :useInView18;

I also added some docs and tests foruseOnInViewChanged

Found another optimization:

Currently the same element would be added multiple time to the same observer

I fixedobserver.ts to add it only once

Thanks a lot for doing all this. I think the conditional version switch, is the safest bet right now. It's a small hook, so overhead is minimal.
I just know that dropping react 18, will create a ton of issues, with people that can't upgrade to React 19 yet for reasons.

I'm a bit tied up at work, so haven't had time to properly dig into and test the changes.

Cool I am looking forward to it

I guess acanary tag ornexttag would also be fine - that way an update would be an explicit opt-in and thelatest tag would still be backwards compatible

You probably know that React fiber allows to pause and resume renderings

Unfortunately this comes with a cost - the following is no longer allowed:

constonGetsIntoViewRef=React.useRef(onGetsIntoView);onGetsIntoViewRef.current=onGetsIntoView;

https://react.dev/reference/react/useRef#caveats

Do not write or read ref.current during rendering, except for initialization. This makes your component’s behavior unpredictable.

There was theuseEvent RFC:
reactjs/rfcs#220

Which was merged as experimentaluseEffectEvent
facebook/react#25881

There is a polyfill which usesReact.useInsertionEffect (because it runs before useEffect and useLayoutEffect):
https://github.com/sanity-io/use-effect-event/blob/main/src/useEffectEvent.ts

I changeduseOnInViewChanged to also useReact.useInsertionEffect so nowuseOnInViewChanged anduseInView should be fine

This might be an extrem scenario but it illustrates how flexible the new hook is and how convenient the cleanup feature can be.

Track only the first impression if the element is larger than100px without rerenderings:

just fixed another bug on this branch

the following code executes all callbacks for the given dom element:

elements.get(entry.target)?.forEach((callback)=>{callback(inView,entry);});

however if callback callsunobserve it will modify the callbacks array which is currently iterated over and therefore the index position skips over one callback

great efforts and looking forward for this being merged 👍

@thebuilder really cool that you merged over the hook!

Thank you so much - and I really like the idea of just using a ref with the useEffect

I saw that your solution did not take in all performance optimisations

the code size is 30% larger than the#718 solution.. do you think it would make sense to try moving over the optimizations to main? or do you think it would be possible to prepare a new major for react 19.2 +?

that way we could make use ofuseEffectEvent

It is larger since it still has the fallback and React 17+ support.

It would be possible to applyuseEffectEvent, which I did try - but in theuseOnInView, it would be used inside auseCallback (which would not be the correct usage for theuseEffectEvent).