fix(InfiniteScroll): fixed the double onActivate in the InfiniteScroll component

src/components/InfiniteScroll/InfiniteScroll.tsx

@@ -2,7 +2,7 @@ import React, {useState, useRef, useEffect} from 'react';
 import {Loader} from '@gravity-ui/uikit';
 
 import {block} from '../utils/cn';
-import {useIntersection} from './hooks/useIntersection';
+import {useOnIntersected} from './hooks/useOnIntersected';
 
 import './InfiniteScroll.scss';
 
@@ -27,7 +27,6 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
     const [isActive, setIsActive] = useState(false);
     const [bottomRef, setBottomRef] = useState<HTMLDivElement | null>(null);
     const mounted = useRef(false);
-    const isBottomVisible = useIntersection(bottomRef);
 
     useEffect(() => {
         mounted.current = true;
@@ -37,7 +36,7 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
         };
     }, []);
 
-    useEffect(() => {
+    useOnIntersected(bottomRef, () => {
         const handleFetchData = async () => {
             setIsActive(true);
             await onActivate();
@@ -47,10 +46,10 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
             }
         };
 
-        if (isBottomVisible && !isActive && !disabled) {
+        if (!isActive && !disabled) {
             handleFetchData();
         }
-    }, [isBottomVisible, onActivate, isActive, disabled]);
+    });
 
     const renderedLoader = loader || (
         <div className={b('loader')}>

src/components/InfiniteScroll/hooks/useOnIntersected.ts

@@ -0,0 +1,21 @@
+import {useEffect} from 'react';
+
+export const useOnIntersected = (
+    element: Element | null,
+    onIntersected: () => void,
+    options?: IntersectionObserverInit,
+) => {
+    useEffect(() => {
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                onIntersected();
+            }
+        }, options);
+
+        if (element) {
+            observer.observe(element);
+        }
+
+        return () => (element === null ? undefined : observer.unobserve(element));
+    }, [element, onIntersected, options]);
+};