Fix useInView with hook from the initial implementation. See desc.

Copypaste and convert to js: https://github.com/cats-oss/use-intersection/blob/master/src/index.ts

Original use-intersection react dependency hasn't been updated in a while:
cats-oss/use-intersection#143

Can't use the react-use version because it's not triggering sometimes:
streamich/react-use#2359
streamich/react-use#2376

README.md

@@ -30,7 +30,6 @@ Aside from this readme, there is additional information about the whole project
 ### Issues
 
 - Oras, last drop is not animated to the end. Possibly related to locomotive-scroll/react-locomotive-scroll updates. Noticed in production.
-- Info: Not animating in, possible issue with useInView. Noticed in production.
 
 ### Notes
 

lib/useInView.js

@@ -1,46 +1,29 @@
-import { useEffect, useRef, useState } from 'react';
 import { isString } from '@/lib/utility';
-import { useIntersection } from 'react-use';
+import { useIntersection } from '@/lib/useIntersection';
 
-/**
- * https://github.com/streamich/react-use/issues/1664
- */
 export const useInView = (ref, threshold = 0, once = true) => {
   if (isString(threshold)) threshold = parseFloat(threshold);
   if (threshold > 1) threshold = threshold.toFixed(2) * 0.01;
   const negativeValue = Math.sign(threshold) < 0;
   if (negativeValue) threshold = 0;
 
-  const mockRef = useRef(null);
-  const [intersectedOnce, setIntersectedOnce] = useState(false);
-  const intersection = useIntersection(
-    once && intersectedOnce ? mockRef : ref,
-    {
-      root: null,
-      rootMargin: '0px',
-      threshold,
-    },
-  );
-  const isIntersecting = intersection?.isIntersecting;
-
-  useEffect(() => {
-    if (once && !intersectedOnce && isIntersecting) setIntersectedOnce(true);
-  }, [intersectedOnce, isIntersecting, once]);
+  const inView = useIntersection(ref, {
+    threshold,
+    once,
+  });
 
   if (negativeValue) return true;
-  return once ? intersectedOnce : isIntersecting;
+  return inView;
 };
 
 export const useInViewVideo = (ref, threshold = 0) => {
   const isVideo = ref.current && ref.current.tagName === 'VIDEO';
-  const intersection = useIntersection(ref, {
-    root: null,
-    rootMargin: '0px',
+
+  const inView = useIntersection(ref, {
     threshold,
   });
-  const isIntersecting = intersection?.isIntersecting;
 
-  if (isVideo && isIntersecting) {
+  if (isVideo && inView) {
     const video = ref.current;
     video.muted = true;
 
@@ -50,7 +33,7 @@ export const useInViewVideo = (ref, threshold = 0) => {
     }
   }
 
-  if (isVideo && !isIntersecting) {
+  if (isVideo && !inView) {
     const video = ref.current;
 
     if (!video.paused) {
@@ -59,5 +42,5 @@ export const useInViewVideo = (ref, threshold = 0) => {
     }
   }
 
-  return intersection?.isIntersecting;
+  return inView;
 };

lib/useIntersection.js

@@ -0,0 +1,81 @@
+import { useRef, useState, useEffect } from 'react';
+import shallowEqual from 'shallowequal';
+
+/**
+ * Copypaste and conversion to js of the following:
+ * https://github.com/cats-oss/use-intersection/blob/master/src/index.ts
+ *
+ * Originals react dependency hasn't been updated in a while:
+ * https://github.com/cats-oss/use-intersection/issues/143
+ *
+ * Can't use the react-use version because it's not triggering sometimes:
+ * https://github.com/streamich/react-use/issues/2359
+ * https://github.com/streamich/react-use/issues/2376
+ */
+export const useIntersection = (target, options = {}, callback) => {
+  const { defaultIntersecting, once, ...opts } = options;
+  const optsRef = useRef(opts);
+  const [intersecting, setIntersecting] = useState(
+    defaultIntersecting === true,
+  );
+  const intersectedRef = useRef(false);
+
+  useEffect(() => {
+    if (!shallowEqual(optsRef.current, opts)) {
+      optsRef.current = opts;
+    }
+  });
+
+  useEffect(() => {
+    if (target == null) {
+      return;
+    }
+
+    const element = target instanceof Element ? target : target.current;
+    if (element == null) {
+      return;
+    }
+
+    if (once && intersectedRef.current) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      entries => {
+        const entry = entries[entries.length - 1];
+        setIntersecting(entry.isIntersecting);
+
+        if (callback != null) {
+          callback(entry);
+        }
+
+        if (entry.isIntersecting) {
+          intersectedRef.current = true;
+        }
+
+        if (once && entry.isIntersecting && element != null) {
+          observer.unobserve(element);
+        }
+      },
+      {
+        ...optsRef.current,
+        root:
+          optsRef.current.root != null ? optsRef.current.root.current : null,
+      },
+    );
+
+    observer.observe(element);
+
+    return () => {
+      if (once && intersectedRef.current) {
+        return;
+      }
+
+      if (element != null) {
+        observer.unobserve(element);
+      }
+    };
+  }, [optsRef.current, target]);
+
+  return intersecting;
+};

package.json

@@ -26,6 +26,7 @@
     "react-dom": "^17.0.2",
     "react-locomotive-scroll": "0.2.1",
     "react-use": "^17.4.0",
+    "shallowequal": "^1.1.0",
     "sharp": "^0.32.1",
     "smoothscroll-polyfill": "^0.4.4",
     "use-callback-ref": "^1.3.0"