manageSubscription fails with useIntersectionObserver and GridLayout

[M-Blobby]

Select which package(s) are affected

@livekit/components-react

Describe the bug

What I'm expecting

When manageSubscription is enabled on VideoTrack, track subscription should follow tile visibility consistently:

1. subscribe when the tile becomes visible
2. unsubscribe when the tile is no longer visible (including GridLayout page changes where tiles are removed from the DOM)

What happens instead

manageSubscription is unreliable in two cases:

• after the usehooks-ts v3 migration I guess, useIntersectionObserver was not wired correctly, so visibility updates (intersectionEntry?.isIntersecting) were not consistently reflected
• with GridLayout pagination, tiles are unmounted when leaving the page, and no intersection “exit” event is fired, so unsubscribe may not happen as expected

Reproduction

1. Render participant videos with manageSubscription={true} on VideoTrack.
2. Use both layouts:
   • GridLayout with enough participants to enable pagination
   • CarouselLayout with scroll
3. Add logs for:
   • intersectionEntry?.isIntersecting,
   • calls to publication.setSubscribed(...)
4. In CarouselLayout, scroll tiles in/out of view
5. In GridLayout, switch pages so tiles are removed from DOM

Observed

intersectionEntry?.isIntersecting is not reliable (always false), so visibility-based subscription logic does not behave as expected.
In GridLayout pagination, tiles can unmount without a usable visibility transition, so unsubscribe is missed if only driven by intersection updates.

Expected

isIntersecting should correctly reflect tile visibility changes.
With manageSubscription, tracks should subscribe when visible and unsubscribe when hidden or unmounted (including grid page changes).

Logs

System Info

Package: @livekit/components-react
Version: 2.9.20
Browsers: Chrome, Firefox
OS: Windows 1
Node.js: 24

Severity

annoyance

Additional Information

No response