fix: ref cannot be used as a dependency

Author: condorheroblog

src/scrollama.tsx

@@ -11,9 +11,9 @@ export const Scrollama = <T = unknown>({
   debug,
   children,
   offset = 0.3,
-  onStepEnter = () => { },
-  onStepExit = () => { },
-  onStepProgress = () => { },
+  onStepEnter,
+  onStepExit,
+  onStepProgress,
   threshold = 4,
 }: ScrollamaProps<T>) => {
   const isOffsetDefinedInPixels = isOffsetInPixels(offset);

src/step.tsx

@@ -1,8 +1,18 @@
-import { useState, useEffect, useMemo, useCallback, useRef, Children, cloneElement, useContext } from 'react';
+import {
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+  useRef,
+  Children,
+  cloneElement,
+  useContext,
+  useLayoutEffect,
+} from 'react';
 import { useInView } from 'react-intersection-observer';
 
 import { isBrowser, getRootMargin, getProgressRootMargin } from './utils';
-import type { StepProps } from './types';
+import type { StepProps, ScrollamaCallbackData } from './types';
 import { ScrollamaProvide } from './provide';
 
 export const Step: React.FC<StepProps> = ({
@@ -20,6 +30,7 @@ export const Step: React.FC<StepProps> = ({
     innerHeight = 0,
   } = useContext(ScrollamaProvide);
 
+  const [nodeOffsetHeight, setNodeOffsetHeight] = useState(0);
   const rootMargin = getRootMargin({ offset });
   const { ref: inViewRef, entry } = useInView({
     rootMargin,
@@ -33,9 +44,10 @@ export const Step: React.FC<StepProps> = ({
   const ref = useRef<HTMLElement | null>(null);
   const [isIntersecting, setIsIntersecting] = useState(false);
 
+
   const progressRootMargin = useMemo(
-    () => getProgressRootMargin({ direction, offset, node: ref, innerHeight }),
-    [direction, offset, ref, innerHeight]
+    () => getProgressRootMargin({ direction, offset, nodeOffsetHeight, innerHeight }),
+    [direction, offset, nodeOffsetHeight, innerHeight]
   );
 
   const { ref: scrollProgressRef, entry: scrollProgressEntry } = useInView({
@@ -55,7 +67,7 @@ export const Step: React.FC<StepProps> = ({
 
   useEffect(() => {
     if (isIntersecting && scrollProgressEntry) {
-      const { height, top } = scrollProgressEntry.target.getBoundingClientRect();
+      const { height, top } = scrollProgressEntry.boundingClientRect;
       const progress = Math.min(1, Math.max(0, (window.innerHeight * offset - top) / height));
       if (onStepProgress) {
         onStepProgress({
@@ -70,22 +82,29 @@ export const Step: React.FC<StepProps> = ({
   }, [scrollProgressEntry]);
 
   useEffect(() => {
-    if (entry && !entry.isIntersecting && isIntersecting) {
-      setIsIntersecting(false);
-      onStepExit({ element: entry.target, data, entry, direction });
-      handleSetLastScrollTop(scrollTop)
-    } else if (entry && entry.isIntersecting && !isIntersecting) {
-      setIsIntersecting(true);
-      onStepEnter({ element: entry.target, data, entry, direction });
-      handleSetLastScrollTop(scrollTop)
+    if (entry) {
+      const currentIntersectionState = entry.isIntersecting;
+      if (currentIntersectionState !== isIntersecting) {
+        setIsIntersecting(currentIntersectionState);
+        const eventData: ScrollamaCallbackData<unknown> = { element: entry.target, data, entry, direction };
+        if (currentIntersectionState) {
+          onStepEnter(eventData);
+        } else {
+          onStepExit(eventData);
+        }
+        handleSetLastScrollTop(scrollTop);
+      }
     }
   }, [entry]);
 
+  useLayoutEffect(() => {
+    if (ref.current) {
+      setNodeOffsetHeight(ref.current.offsetHeight);
+    }
+  }, [ref.current]);
+
   const childElement = Children.only(children);
-  return cloneElement(childElement, {
-    ref: setRefs,
-    entry,
-  });
+  return cloneElement(childElement, { ref: setRefs });
 };
 
 

src/utils.ts

@@ -58,7 +58,7 @@ export const getRootMargin = ({ offset }: { offset: number }) => {
 interface GetProgressRootMarginParams {
   direction: string;
   offset: number;
-  node: React.RefObject<HTMLElement>;
+  nodeOffsetHeight: number;
   innerHeight: number;
 }
 
@@ -68,13 +68,13 @@ interface GetProgressRootMarginParams {
  * @param {Object} params - The parameters for calculating the root margin.
  * @param {string} params.direction - The scroll direction ('up' or 'down').
  * @param {number} params.offset - The offset value, typically between 0 and 1.
- * @param {React.RefObject<HTMLElement>} params.node - Reference to the DOM node being tracked.
+ * @param {number} params.nodeOffsetHeight - The offset height of the node.
  * @param {number} params.innerHeight - The inner height of the viewport.
  * @returns {string} The calculated root margin string in the format "top right bottom left".
  */
-export const getProgressRootMargin = ({ direction, offset, node, innerHeight }: GetProgressRootMarginParams) => {
-  if (!node.current) return '0px';
-  const offsetHeight = (node.current.offsetHeight / innerHeight);
+export const getProgressRootMargin = ({ direction, offset, nodeOffsetHeight, innerHeight }: GetProgressRootMarginParams) => {
+  if (!nodeOffsetHeight) return '0px';
+  const offsetHeight = (nodeOffsetHeight / innerHeight);
   if (direction === 'down') return `${(offsetHeight - offset) * 100}% 0px ${(offset * 100) - 100}% 0px`;
   return `-${offset * 100}% 0px ${(offsetHeight * 100) - (100 - (offset * 100))}% 0px`;
 }

tests/utils.test.ts

@@ -72,19 +72,17 @@ describe('getRootMargin', () => {
 
 
 describe('getProgressRootMargin', () => {
-  it('should return "0px" when node.current is null', () => {
-    expect(getProgressRootMargin({ direction: 'down', offset: 0, node: { current: null }, innerHeight: 0 })).toBe('0px');
+  it('should return "0px" when nodeOffsetHeight is null', () => {
+    expect(getProgressRootMargin({ direction: 'down', offset: 0, nodeOffsetHeight: 0, innerHeight: 0 })).toBe('0px');
   });
 
   it('should return correct margin for downward scrolling', () => {
-    const mockNode = { current: { offsetHeight: 500 } } as React.RefObject<HTMLElement>;
-    const result = getProgressRootMargin({ direction: 'down', offset: 0.3, node: mockNode, innerHeight: 1000 });
+    const result = getProgressRootMargin({ direction: 'down', offset: 0.3, nodeOffsetHeight: 500, innerHeight: 1000 });
     expect(result).toBe('20% 0px -70% 0px');
   });
 
   it('should return correct margin for upward scrolling', () => {
-    const mockNode = { current: { offsetHeight: 500 } } as React.RefObject<HTMLElement>;
-    const result = getProgressRootMargin({ direction: 'up', offset: 0.3, node: mockNode, innerHeight: 1000 });
+    const result = getProgressRootMargin({ direction: 'up', offset: 0.3, nodeOffsetHeight: 500, innerHeight: 1000 });
     expect(result).toBe('-30% 0px -20% 0px');
   });
 });