feat: adjust onChange so it only trigger after changes

Author: thebuilder

README.md

@@ -71,6 +71,8 @@ const Component = () => {
 };
 ```
 
+> **Note:** The first `false` notification from the underlying IntersectionObserver is ignored so your handlers only run after a real visibility change. Subsequent transitions still report both `true` and `false` states as the element enters and leaves the viewport.
+
 ### `useOnInView` hook
 
 ```js
@@ -103,6 +105,8 @@ Key differences from `useInView`:
 - **Similar options** - Accepts all the same [options](#options) as `useInView`
   except `onChange`, `initialInView`, and `fallbackInView`
 
+> **Note:** Just like `useInView`, the initial `false` notification is skipped. Your callback fires the first time the element becomes visible (and on every subsequent enter/leave transition).
+
 ```jsx
 import React from "react";
 import { useOnInView } from "react-intersection-observer";
@@ -149,18 +153,20 @@ state.
 ```jsx
 import { InView } from "react-intersection-observer";
 
-const Component = () => (
-  <InView>
-    {({ inView, ref, entry }) => (
+ const Component = () => (
+ <InView>
+ {({ inView, ref, entry }) => (
       <div ref={ref}>
         <h2>{`Header inside viewport ${inView}.`}</h2>
       </div>
     )}
   </InView>
 );
 
-export default Component;
-```
+ export default Component;
+ ```
+
+> **Note:** `<InView>` mirrors the hook behaviour—it suppresses the very first `false` notification so render props and `onChange` handlers only run after a genuine visibility change.
 
 ### Plain children
 

src/InView.tsx

@@ -68,13 +68,15 @@ export class InView extends React.Component<
 > {
   node: Element | null = null;
   _unobserveCb: (() => void) | null = null;
+  lastInView: boolean | undefined;
 
   constructor(props: IntersectionObserverProps | PlainChildrenProps) {
     super(props);
     this.state = {
       inView: !!props.initialInView,
       entry: undefined,
     };
+    this.lastInView = props.initialInView;
   }
 
   componentDidMount() {
@@ -112,6 +114,9 @@ export class InView extends React.Component<
       fallbackInView,
     } = this.props;
 
+    if (this.lastInView === undefined) {
+      this.lastInView = this.props.initialInView;
+    }
     this._unobserveCb = observe(
       this.node,
       this.handleChange,
@@ -142,6 +147,7 @@ export class InView extends React.Component<
       if (!node && !this.props.triggerOnce && !this.props.skip) {
         // Reset the state if we get a new node, and we aren't ignoring updates
         this.setState({ inView: !!this.props.initialInView, entry: undefined });
+        this.lastInView = this.props.initialInView;
       }
     }
 
@@ -150,6 +156,14 @@ export class InView extends React.Component<
   };
 
   handleChange = (inView: boolean, entry: IntersectionObserverEntry) => {
+    const previousInView = this.lastInView;
+    this.lastInView = inView;
+
+    // Ignore the very first `false` notification so consumers only hear about actual state changes.
+    if (previousInView === undefined && !inView) {
+      return;
+    }
+
     if (inView && this.props.triggerOnce) {
       // If `triggerOnce` is true, we should stop observing the element.
       this.unobserve();

src/__tests__/InView.test.tsx

@@ -13,16 +13,19 @@ test("Should render <InView /> intersecting", () => {
   );
 
   mockAllIsIntersecting(false);
-  expect(callback).toHaveBeenLastCalledWith(
-    false,
-    expect.objectContaining({ isIntersecting: false }),
-  );
+  expect(callback).not.toHaveBeenCalled();
 
   mockAllIsIntersecting(true);
   expect(callback).toHaveBeenLastCalledWith(
     true,
     expect.objectContaining({ isIntersecting: true }),
   );
+
+  mockAllIsIntersecting(false);
+  expect(callback).toHaveBeenLastCalledWith(
+    false,
+    expect.objectContaining({ isIntersecting: false }),
+  );
 });
 
 test("should render plain children", () => {

src/__tests__/hooks.test.tsx renamed to src/__tests__/useInView.test.tsx

@@ -112,6 +112,9 @@ test("should trigger onChange", () => {
   const onChange = vi.fn();
   render(<HookComponent options={{ onChange }} />);
 
+  mockAllIsIntersecting(false);
+  expect(onChange).not.toHaveBeenCalled();
+
   mockAllIsIntersecting(true);
   expect(onChange).toHaveBeenLastCalledWith(
     true,
@@ -191,7 +194,7 @@ const SwitchHookComponent = ({
       />
       <div
         data-testid="item-2"
-        data-inview={!!toggle && inView}
+        data-inview={toggle && inView}
         ref={toggle && !unmount ? ref : undefined}
       />
     </>

src/__tests__/useOnInView.test.tsx

@@ -153,6 +153,17 @@ test("should call the callback when element comes into view", () => {
   expect(wrapper.getAttribute("data-call-count")).toBe("1");
 });
 
+test("should ignore initial false intersection", () => {
+  const { getByTestId } = render(<OnInViewChangedComponent />);
+  const wrapper = getByTestId("wrapper");
+
+  mockAllIsIntersecting(false);
+  expect(wrapper.getAttribute("data-call-count")).toBe("0");
+
+  mockAllIsIntersecting(true);
+  expect(wrapper.getAttribute("data-call-count")).toBe("1");
+});
+
 test("should call cleanup when element leaves view", () => {
   const { getByTestId } = render(<OnInViewChangedComponent />);
   mockAllIsIntersecting(true);

src/useInView.tsx

@@ -47,6 +47,7 @@ export function useInView({
 }: IntersectionOptions = {}): InViewHookResponse {
   const [ref, setRef] = React.useState<Element | null>(null);
   const callback = React.useRef<IntersectionOptions["onChange"]>(onChange);
+  const lastInViewRef = React.useRef<boolean | undefined>(initialInView);
   const [state, setState] = React.useState<State>({
     inView: !!initialInView,
     entry: undefined,
@@ -59,13 +60,24 @@ export function useInView({
   // biome-ignore lint/correctness/useExhaustiveDependencies: threshold is not correctly detected as a dependency
   React.useEffect(
     () => {
+      if (lastInViewRef.current === undefined) {
+        lastInViewRef.current = initialInView;
+      }
       // Ensure we have node ref, and that we shouldn't skip observing
       if (skip || !ref) return;
 
       let unobserve: (() => void) | undefined;
       unobserve = observe(
         ref,
         (inView, entry) => {
+          const previousInView = lastInViewRef.current;
+          lastInViewRef.current = inView;
+
+          // Ignore the very first `false` notification so consumers only hear about actual state changes.
+          if (previousInView === undefined && !inView) {
+            return;
+          }
+
           setState({
             inView,
             entry,
@@ -127,6 +139,7 @@ export function useInView({
       inView: !!initialInView,
       entry: undefined,
     });
+    lastInViewRef.current = initialInView;
   }
 
   const result = [setRef, state.inView, state.entry] as InViewHookResponse;

src/useOnInView.tsx

@@ -60,6 +60,7 @@ export const useOnInView = <TElement extends Element>(
   const onIntersectionChangeRef = React.useRef(onIntersectionChange);
   const observedElementRef = React.useRef<TElement | null>(null);
   const observerCleanupRef = React.useRef<(() => void) | undefined>(undefined);
+  const lastInViewRef = React.useRef<boolean | undefined>(undefined);
 
   useSyncEffect(() => {
     onIntersectionChangeRef.current = onIntersectionChange;
@@ -85,6 +86,7 @@ export const useOnInView = <TElement extends Element>(
       if (!element || skip) {
         cleanupExisting();
         observedElementRef.current = null;
+        lastInViewRef.current = undefined;
         return;
       }
 
@@ -96,6 +98,14 @@ export const useOnInView = <TElement extends Element>(
       const destroyObserver = observe(
         element,
         (inView, entry) => {
+          const previousInView = lastInViewRef.current;
+          lastInViewRef.current = inView;
+
+          // Ignore the very first `false` notification so consumers only hear about actual state changes.
+          if (previousInView === undefined && !inView) {
+            return;
+          }
+
           onIntersectionChangeRef.current(
             inView,
             entry as IntersectionObserverEntry & { target: TElement },
@@ -121,6 +131,7 @@ export const useOnInView = <TElement extends Element>(
         destroyObserver();
         observedElementRef.current = null;
         observerCleanupRef.current = undefined;
+        lastInViewRef.current = undefined;
       }
 
       observerCleanupRef.current = stopObserving;