fix: prevent callback skipping with triggerOnce and merged refs

Author: djk01281

src/__tests__/useInView.test.tsx

@@ -398,3 +398,42 @@ test("should restore the browser IntersectionObserver", () => {
   expect(window.IntersectionObserver).toBeDefined();
   expect(vi.isMockFunction(window.IntersectionObserver)).toBe(false);
 });
+
+test("should trigger all hooks when using triggerOnce with merged refs", () => {
+  const MultipleHooksWithTriggerOnce = () => {
+    const { ref: ref1, inView: inView1 } = useInView({ triggerOnce: true });
+    const { ref: ref2, inView: inView2 } = useInView({ triggerOnce: true });
+    const { ref: ref3, inView: inView3 } = useInView({ triggerOnce: true });
+
+    const setRefs = useCallback(
+      (node: Element | null) => {
+        ref1(node);
+        ref2(node);
+        ref3(node);
+      },
+      [ref1, ref2, ref3],
+    );
+
+    return (
+      <div ref={setRefs}>
+        <div data-testid="item-1" data-inview={inView1.toString()}>
+          {inView1.toString()}
+        </div>
+        <div data-testid="item-2" data-inview={inView2.toString()}>
+          {inView2.toString()}
+        </div>
+        <div data-testid="item-3" data-inview={inView3.toString()}>
+          {inView3.toString()}
+        </div>
+      </div>
+    );
+  };
+
+  const { getByTestId } = render(<MultipleHooksWithTriggerOnce />);
+
+  mockAllIsIntersecting(true);
+
+  expect(getByTestId("item-1").getAttribute("data-inview")).toBe("true");
+  expect(getByTestId("item-2").getAttribute("data-inview")).toBe("true");
+  expect(getByTestId("item-3").getAttribute("data-inview")).toBe("true");
+});

src/observe.ts

@@ -82,7 +82,9 @@ function createObserver(options: IntersectionObserverInit) {
           entry.isVisible = inView;
         }
 
-        elements.get(entry.target)?.forEach((callback) => {
+        // Copy the callbacks array before iterating to prevent issues when callbacks
+        // are removed during iteration (e.g., when using triggerOnce)
+        [...(elements.get(entry.target) ?? [])].forEach((callback) => {
           callback(inView, entry);
         });
       });