fix: respect threshold before trigger once cleanup

src/__tests__/useInView.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import React, { useCallback } from "react";
 import { defaultFallbackInView, type IntersectionOptions } from "../index";
 import {
@@ -118,6 +118,38 @@ test("should respect trigger once", () => {
  getByText("true");
 });
 
+test("should respect the threshold before triggering once", () => {
+ const { getByTestId, getByText } = render(
+ <HookComponent
+ options={{ initialInView: true, threshold: 0.5, triggerOnce: true }}
+ />,
+ );
+ const wrapper = getByTestId("wrapper");
+ const instance = intersectionMockInstance(wrapper);
+ const callback = vi.mocked(window.IntersectionObserver).mock.calls[0][0];
+ const createEntry = (
+ intersectionRatio: number,
+ ): IntersectionObserverEntry => ({
+ boundingClientRect: wrapper.getBoundingClientRect(),
+ intersectionRatio,
+ intersectionRect: wrapper.getBoundingClientRect(),
+ isIntersecting: true,
+ rootBounds: null,
+ target: wrapper,
+ time: performance.now(),
+ });
+
+ act(() => callback([createEntry(0.25)], instance));
+
+ getByText("false");
+ expect(instance.unobserve).not.toHaveBeenCalled();
+
+ act(() => callback([createEntry(0.5)], instance));
+
+ getByText("true");
+ expect(instance.unobserve).toHaveBeenCalledTimes(1);
+});
+
 test("should trigger onChange", () => {
  const onChange = vi.fn();
  render(<HookComponent options={{ onChange }} />);

src/useInView.tsx

@@ -85,7 +85,7 @@ export function useInView({
  });
  if (callback.current) callback.current(inView, entry);
 
- if (entry.isIntersecting && triggerOnce && unobserve) {
+ if (inView && triggerOnce && unobserve) {
  // If it should only trigger once, unobserve the element after it's inView
  unobserve();
  unobserve = undefined;