fix(core): use ref to ensure persistent values across renders

Author: SMAKSS

src/index.ts

@@ -1,39 +1,93 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 
 /** Enumeration for axis values */
 export enum Axis {
+  /**
+   * The x-axis represents the horizontal direction.
+   */
   X = 'x',
+  /**
+   * The y-axis represents the vertical direction.
+   */
   Y = 'y'
 }
 
 /** Enumeration for direction values */
 export enum Direction {
+  /**
+   * The up direction represents the scroll direction moving towards the top.
+   */
   Up = 'up',
+  /**
+   * The down direction represents the scroll direction moving towards the bottom.
+   */
   Down = 'down',
+  /**
+   * The left direction represents the scroll direction moving towards the left.
+   */
   Left = 'left',
+  /**
+   * The right direction represents the scroll direction moving towards the right.
+   */
   Right = 'right',
+  /**
+   * The still direction represents the scroll direction when the user is not scrolling.
+   */
   Still = 'still'
 }
 
 type ScrollPosition = {
+  /**
+   * The top position represents the distance from the top edge of the page.
+   */
   top: number;
+  /**
+   * The bottom position represents the distance from the bottom edge of the page.
+   */
   bottom: number;
+  /**
+   * The left position represents the distance from the left edge of the page.
+   */
   left: number;
+  /**
+   * The right position represents the distance from the right edge of the page.
+   */
   right: number;
 };
 
 /** Type declaration for the returned scroll information */
 type ScrollInfo = {
+  /**
+   * The scrollDir represents the current scroll direction.
+   */
   scrollDir: Direction;
+  /**
+   * The scrollPosition represents the current scroll position.
+   */
   scrollPosition: ScrollPosition;
 };
 
 /** Type declaration for scroll properties */
 type ScrollProps = {
+  /**
+   * The thr represents the threshold value for scroll detection.
+   */
   thr?: number;
+  /**
+   * The axis represents the scroll axis (x or y).
+   */
   axis?: Axis;
+  /**
+   * The scrollUp represents the scroll direction when moving up.
+   */
   scrollUp?: Direction;
+  /**
+   * The scrollDown represents the scroll direction when moving down.
+   */
   scrollDown?: Direction;
+  /**
+   * The still represents the scroll direction when the user is not scrolling.
+   */
   still?: Direction;
 };
 
@@ -87,18 +141,18 @@ function useDetectScroll(props: ScrollProps = {}): ScrollInfo {
   });
 
   const threshold = Math.max(0, thr);
-  let ticking = false;
-  let lastScroll = 0;
+  const ticking = useRef(false);
+  const lastScroll = useRef(0);
 
   /** Function to update scroll direction */
   const updateScrollDir = useCallback(() => {
     const scroll = axis === Axis.Y ? window.scrollY : window.scrollX;
 
-    if (Math.abs(scroll - lastScroll) >= threshold) {
-      setScrollDir(scroll > lastScroll ? scrollDown : scrollUp);
-      lastScroll = Math.max(0, scroll);
+    if (Math.abs(scroll - lastScroll.current) >= threshold) {
+      setScrollDir(scroll > lastScroll.current ? scrollDown : scrollUp);
+      lastScroll.current = Math.max(0, scroll);
     }
-    ticking = false;
+    ticking.current = false;
   }, [axis, threshold, scrollDown, scrollUp]);
 
   useEffect(() => {
@@ -125,20 +179,20 @@ function useDetectScroll(props: ScrollProps = {}): ScrollInfo {
   }, []);
 
   useEffect(() => {
-    lastScroll = axis === Axis.Y ? window.scrollY : window.scrollX;
+    lastScroll.current = axis === Axis.Y ? window.scrollY : window.scrollX;
 
     /** Function to handle onScroll event */
     const onScroll = () => {
-      if (!ticking) {
+      if (!ticking.current) {
         window.requestAnimationFrame(updateScrollDir);
-        ticking = true;
+        ticking.current = true;
       }
     };
 
     window.addEventListener('scroll', onScroll);
 
     return () => window.removeEventListener('scroll', onScroll);
-  }, [updateScrollDir]);
+  }, [axis, updateScrollDir]);
 
   return { scrollDir, scrollPosition };
 }