fix: linter warnings

packages/react/src/index.js

@@ -58,8 +58,10 @@ const Card = props => {
     [lazy]
   )
   const lazyOptions = useMemo(() => (isObject(lazy) ? lazy : undefined), [lazy])
-  const [hasIntersected, cardRef] = useIntersectionObserver(
+  const cardRef = React.useRef(null)
+  const hasIntersected = useIntersectionObserver(
     isLazyEnabled,
+    cardRef,
     lazyOptions
   )
 
@@ -156,7 +158,7 @@ microlink.io/${error.code.toLowerCase()}
     }
   }, [apiUrlProps, fetchData, apiUrl, mergeData, canFetchData])
 
-  useEffect(toFetchData, [url, setData, hasIntersected])
+  useEffect(toFetchData, [url, toFetchData, setData, hasIntersected])
 
   const isLoading = isLoadingUndefined ? loadingState : loading
 
@@ -194,7 +196,6 @@ microlink.io/${error.code.toLowerCase()}
       className={`${classNames.main} ${className}`.trim()}
       href={url}
       isLoading={isLoading}
-      ref={cardRef}
       {...restProps}
     >
       {isLoading ? (

packages/react/src/utils/hooks.js

@@ -1,30 +1,23 @@
 /* global IntersectionObserver */
 
-import { useCallback, useState } from 'react'
+import { useEffect, useState } from 'react'
 
-export const useIntersectionObserver = (enabled, options) => {
+export const useIntersectionObserver = (enabled, ref, options) => {
   const [hasIntersected, setHasIntersected] = useState(false)
 
-  const refCallback = useCallback(
-    node => {
-      if (enabled) {
-        const onIntersect = ([entry], self) => {
-          if (entry.isIntersecting) {
-            setHasIntersected(true)
-            self.unobserve(entry.target)
-          }
+  useEffect(() => {
+    if (enabled && ref.current) {
+      const onIntersect = ([entry], self) => {
+        if (entry.isIntersecting) {
+          setHasIntersected(true)
+          self.unobserve(entry.target)
         }
-        const observer = new IntersectionObserver(onIntersect, options)
-
-        if (node !== null) {
-          observer.observe(node)
-        }
-      } else {
-        setHasIntersected(true)
       }
-    },
-    [enabled, options]
-  )
+      const observer = new IntersectionObserver(onIntersect, options)
+      observer.observe(ref.current)
+      return () => observer.disconnect()
+    }
+  }, [ref, enabled, options])
 
-  return [hasIntersected, refCallback]
+  return hasIntersected
 }