Can we Observe multiple components with one useInView Hook?

[ElamuruganGR]

Hi Team,

I have a horizontal slider containing list of cards. I want to observe the intersection of each cards with the screen (visibility : visible when intersecting the screen).
So i tried using react-intersection-observer on each card's wrapper. I mean one intersection observer for each card (1 to 1).

Problem:

With this i can observe a performance issue like when the user scrolls the page down and up so fast all the cards in the horizontal slider come up after 1 or 2 secs delay (blank horizontal slider for couple of seconds). I believe its because of multiple intersection observers (one in each card).

ASK:

Can i have one intersection observer for the complete slide ? I mean one intersection observer for multiple cards(1 to many). So that i hope my performance issue gets resolved.
If it is possible to have one observer that observes multiple refs, how to go for that?

[thebuilder]

Behind the scenes, this library is reusing the same IntersectionObserver instance (when given the same settings). You should create a hook per card.

Keep in mind that IntersectionObservers are async, and might delay update to keep performance.

[ElamuruganGR]

@thebuilder
The same settings you meant,
Are the IntersectionOptions alone?
or
Are both the IntersectionOptions and the targetRef ?

[thebuilder]

Just the IntersectionOptions - E.g. same threshold and rootMargin.