prevent callback skipping with triggerOnce and merged refs

[djk01281]

Hello! 👋🏻 I ran into this bug while using multiple useInView hooks with merged refs, so I opened an issue and put together this fix.

Let me know if anything needs to be changed!

Loving the library by the way : )

Description

Fixes #746

This PR fixes a bug where callbacks are skipped when multiple useInView({ triggerOnce: true }) hooks are merged on the same element.

Problem

When a callback executes with triggerOnce: true, it calls unobserve() which removes the callback from the array using splice(). This modifies the array during forEach iteration, causing subsequent callbacks to be skipped.

Solution

Copy the callbacks array before iterating using the spread operator:

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

This prevents the iteration from being affected by array modifications.

Changes

• src/observe.ts: Use spread operator to copy callbacks array before iteration
• src/tests/useInView.test.tsx: Add test case to verify all callbacks are triggered with triggerOnce and merged refs

Testing

Added a new test that reproduces the bug:

• Creates 3 useInView hooks with triggerOnce: true
• Merges all refs onto a single element
• Verifies all 3 hooks receive inView: true

Before fix: Test fails - only hooks 1 and 3 trigger, hook 2 remains false

After fix: Test passes - all 3 hooks trigger correctly : )

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
react-intersection-observer	Ready	Preview, Comment	Feb 3, 2026 1:36pm

[pkg-pr-new]

npm i https://pkg.pr.new/thebuilder/react-intersection-observer@747

commit: 50f709d

[thebuilder]

Looks good, thanks for fixing it. On vacation, but will release it in a couple of weeks.

[Copilot]

Pull request overview

Fixes a regression/edge-case in the IntersectionObserver callback dispatch where multiple useInView({ triggerOnce: true }) listeners attached to the same element (via merged refs) could be skipped due to in-loop mutation of the callbacks array.

Changes:

• Prevent callback skipping by iterating over a copied callbacks array in the observer entry handler.
• Add a regression test covering multiple triggerOnce hooks merged onto a single element.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
src/observe.ts	Iterates over a snapshot of the callbacks list to avoid splice() mutation during iteration.
src/__tests__/useInView.test.tsx	Adds a test reproducing and validating the fix for merged refs + triggerOnce.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.