fix: respect threshold before trigger once cleanup

Author: thebuilder

src/__tests__/useInView.test.tsx

@@ -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(),
+  });
+
+  React.act(() => callback([createEntry(0.25)], instance));
+
+  getByText("false");
+  expect(instance.unobserve).not.toHaveBeenCalled();
+
+  React.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;