use of React 19 ref callbacks for IntersectionObserver tracking

README.md

@@ -236,6 +236,62 @@ You can read more about this on these links:
 - [w3c/IntersectionObserver: Cannot track intersection with an iframe's viewport](https://github.com/w3c/IntersectionObserver/issues/372)
 - [w3c/Support iframe viewport tracking](https://github.com/w3c/IntersectionObserver/pull/465)
 
+### `useOnInView` hook
+
+```js
+const inViewRef = useOnInView(
+  (enterEntry) => {
+    // Do something with the element that came into view
+    console.log('Element is in view', enterEntry?.target);
+
+    // Optionally return a cleanup function
+    return (exitEntry) => {
+      console.log('Element moved out of view or unmounted');
+    };
+  },
+  options // Optional IntersectionObserver options
+);
+```
+
+The `useOnInView` hook provides a more direct alternative to `useInView`. It takes a callback function and returns a ref that you can assign to the DOM element you want to monitor. When the element enters the viewport, your callback will be triggered.
+
+Key differences from `useInView`:
+- **No re-renders** - This hook doesn't update any state, making it ideal for performance-critical scenarios
+- **Direct element access** - Your callback receives the actual IntersectionObserverEntry with the `target` element
+- **Optional cleanup** - Return a function from your callback to run when the element leaves the viewport
+- **Similar options** - Accepts all the same [options](#options) as `useInView` except `onChange` and `initialInView`
+
+The `trigger` option allows to listen for the element entering the viewport or leaving the viewport. The default is `enter`.
+
+```jsx
+import React from "react";
+import { useOnInView } from "react-intersection-observer";
+
+const Component = () => {
+  // Track when element appears without causing re-renders
+  const trackingRef = useOnInView((entry) => {
+    // Element is in view - perhaps log an impression
+    console.log("Element appeared in view", entry.target);
+
+    // Return optional cleanup function
+    return () => {
+      console.log("Element left view");
+    };
+  }, {
+    /* Optional options */
+    threshold: 0.5,
+    trigger: "enter",
+    triggerOnce: true,
+  });
+
+  return (
+    <div ref={trackingRef}>
+      <h2>This element is being tracked without re-renders</h2>
+    </div>
+  );
+};
+```
+
 ## Testing
 
 > [!TIP]

biome.json

@@ -30,6 +30,9 @@
       },
       "a11y": {
         "noSvgWithoutTitle": "off"
+      },
+      "correctness": {
+        "useExhaustiveDependencies": "off"
       }
     }
   },

package.json

@@ -108,8 +108,8 @@
     }
   ],
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.17.4",

src/InView.tsx

@@ -103,29 +103,17 @@ export class InView extends React.Component<
 
   observeNode() {
     if (!this.node || this.props.skip) return;
-    const {
+    const { threshold, root, rootMargin, trackVisibility, delay } = this.props;
+
+    this._unobserveCb = observe(this.node, this.handleChange, {
       threshold,
       root,
       rootMargin,
+      // @ts-ignore
       trackVisibility,
+      // @ts-ignore
       delay,
-      fallbackInView,
-    } = this.props;
-
-    this._unobserveCb = observe(
-      this.node,
-      this.handleChange,
-      {
-        threshold,
-        root,
-        rootMargin,
-        // @ts-ignore
-        trackVisibility,
-        // @ts-ignore
-        delay,
-      },
-      fallbackInView,
-    );
+    });
   }
 
   unobserve() {
@@ -184,7 +172,6 @@ export class InView extends React.Component<
       trackVisibility,
       delay,
       initialInView,
-      fallbackInView,
       ...props
     } = this.props as PlainChildrenProps;
 

src/__tests__/InView.test.tsx

@@ -2,7 +2,6 @@ import { render, screen } from "@testing-library/react";
 import { userEvent } from "@vitest/browser/context";
 import React from "react";
 import { InView } from "../InView";
-import { defaultFallbackInView } from "../observe";
 import { intersectionMockInstance, mockAllIsIntersecting } from "../test-utils";
 
 test("Should render <InView /> intersecting", () => {
@@ -157,62 +156,3 @@ test("plain children should not catch bubbling onChange event", async () => {
   await userEvent.type(input, "changed value");
   expect(onChange).not.toHaveBeenCalled();
 });
-
-test("should render with fallback", () => {
-  const cb = vi.fn();
-  // @ts-ignore
-  window.IntersectionObserver = undefined;
-  render(
-    <InView fallbackInView={true} onChange={cb}>
-      Inner
-    </InView>,
-  );
-  expect(cb).toHaveBeenLastCalledWith(
-    true,
-    expect.objectContaining({ isIntersecting: true }),
-  );
-
-  render(
-    <InView fallbackInView={false} onChange={cb}>
-      Inner
-    </InView>,
-  );
-  expect(cb).toHaveBeenLastCalledWith(
-    false,
-    expect.objectContaining({ isIntersecting: false }),
-  );
-
-  expect(() => {
-    vi.spyOn(console, "error").mockImplementation(() => {});
-    render(<InView onChange={cb}>Inner</InView>);
-    // @ts-ignore
-    console.error.mockRestore();
-  }).toThrow();
-});
-
-test("should render with global fallback", () => {
-  const cb = vi.fn();
-  // @ts-ignore
-  window.IntersectionObserver = undefined;
-  defaultFallbackInView(true);
-  render(<InView onChange={cb}>Inner</InView>);
-  expect(cb).toHaveBeenLastCalledWith(
-    true,
-    expect.objectContaining({ isIntersecting: true }),
-  );
-
-  defaultFallbackInView(false);
-  render(<InView onChange={cb}>Inner</InView>);
-  expect(cb).toHaveBeenLastCalledWith(
-    false,
-    expect.objectContaining({ isIntersecting: false }),
-  );
-
-  defaultFallbackInView(undefined);
-  expect(() => {
-    vi.spyOn(console, "error").mockImplementation(() => {});
-    render(<InView onChange={cb}>Inner</InView>);
-    // @ts-ignore
-    console.error.mockRestore();
-  }).toThrow();
-});

src/__tests__/hooks.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import React, { useCallback } from "react";
-import { type IntersectionOptions, defaultFallbackInView } from "../index";
+import type { IntersectionOptions } from "../index";
 import {
   destroyIntersectionMocking,
   intersectionMockInstance,
@@ -235,9 +235,7 @@ test("should handle ref removed", () => {
 const MergeRefsComponent = ({ options }: { options?: IntersectionOptions }) => {
   const [inViewRef, inView] = useInView(options);
   const setRef = useCallback(
-    (node: Element | null) => {
-      inViewRef(node);
-    },
+    (node: Element | null) => inViewRef(node),
     [inViewRef],
   );
 
@@ -263,9 +261,8 @@ const MultipleHookComponent = ({
 
   const mergedRefs = useCallback(
     (node: Element | null) => {
-      ref1(node);
-      ref2(node);
-      ref3(node);
+      const cleanup = [ref1(node), ref2(node), ref3(node)];
+      return () => cleanup.forEach((fn) => fn());
     },
     [ref1, ref2, ref3],
   );
@@ -342,51 +339,6 @@ test("should set intersection ratio as the largest threshold smaller than trigge
   screen.getByText(/intersectionRatio: 0.5/);
 });
 
-test("should handle fallback if unsupported", () => {
-  destroyIntersectionMocking();
-  // @ts-ignore
-  window.IntersectionObserver = undefined;
-  const { rerender } = render(
-    <HookComponent options={{ fallbackInView: true }} />,
-  );
-  screen.getByText("true");
-
-  rerender(<HookComponent options={{ fallbackInView: false }} />);
-  screen.getByText("false");
-
-  expect(() => {
-    vi.spyOn(console, "error").mockImplementation(() => {});
-    rerender(<HookComponent options={{ fallbackInView: undefined }} />);
-    // @ts-ignore
-    console.error.mockRestore();
-  }).toThrowErrorMatchingInlineSnapshot(
-    `[TypeError: IntersectionObserver is not a constructor]`,
-  );
-});
-
-test("should handle defaultFallbackInView if unsupported", () => {
-  destroyIntersectionMocking();
-  // @ts-ignore
-  window.IntersectionObserver = undefined;
-  defaultFallbackInView(true);
-  const { rerender } = render(<HookComponent key="true" />);
-  screen.getByText("true");
-
-  defaultFallbackInView(false);
-  rerender(<HookComponent key="false" />);
-  screen.getByText("false");
-
-  defaultFallbackInView(undefined);
-  expect(() => {
-    vi.spyOn(console, "error").mockImplementation(() => {});
-    rerender(<HookComponent key="undefined" />);
-    // @ts-ignore
-    console.error.mockRestore();
-  }).toThrowErrorMatchingInlineSnapshot(
-    `[TypeError: IntersectionObserver is not a constructor]`,
-  );
-});
-
 test("should restore the browser IntersectionObserver", () => {
   expect(vi.isMockFunction(window.IntersectionObserver)).toBe(true);
   destroyIntersectionMocking();