perf(useDebounceHook): add new debounce functionality

softconstruct · Mar 13, 2024 · eb62c5d · eb62c5d
1 parent 08b7f2b
commit eb62c5d
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 25 deletions.
diff --git a/src/hooks/useDebounceHook.js b/src/hooks/useDebounceHook.js
@@ -1,6 +1,19 @@
 import { useState, useEffect } from 'react';
 
 const useDebounce = (value, delay) => {
+    if (value === undefined) {
+        let timeoutId;
+
+        const debounceCallback = (value, delay) => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(value, delay);
+        };
+
+        const clearDebounce = () => clearTimeout(timeoutId);
+
+        return { debounceCallback, clearDebounce };
+    }
+
     const [debouncedValue, setDebouncedValue] = useState(value);
 
     useEffect(() => {

diff --git a/src/hooks/useEllipsisDetection.js b/src/hooks/useEllipsisDetection.js
@@ -1,30 +1,28 @@
 import { useEffect, useState } from 'react';
+import useDebounce from './useDebounceHook';
 
 const EQUAL_HEIGHT_DIFF = 3;
 
 const useEllipsisDetection = (ref, externalDependencies = []) => {
     const [isTruncated, setIsTruncated] = useState(false);
 
-    useEffect(() => {
-        let timeoutId;
-        const handleResize = () => {
-            if (!ref.current) return;
-            const { scrollWidth, clientWidth, scrollHeight, clientHeight } = ref.current;
-            setIsTruncated(scrollWidth > clientWidth || scrollHeight > clientHeight + EQUAL_HEIGHT_DIFF);
-        };
+    const { debounceCallback, clearDebounce } = useDebounce();
 
-        const debounceResize = () => {
-            clearTimeout(timeoutId);
-            timeoutId = setTimeout(handleResize, 100);
-        };
+    const handleResize = () => {
+        if (!ref.current) return;
+        const { scrollWidth, clientWidth, scrollHeight, clientHeight } = ref.current;
+        setIsTruncated(scrollWidth > clientWidth || scrollHeight > clientHeight + EQUAL_HEIGHT_DIFF);
+    };
 
-        window.addEventListener('resize', debounceResize);
+    useEffect(() => handleResize(), []);
 
-        handleResize();
+    useEffect(() => {
+        const debounce = () => debounceCallback(handleResize, 100);
+        window.addEventListener('resize', debounce);
 
         return () => {
-            window.removeEventListener('resize', debounceResize);
-            clearTimeout(timeoutId);
+            clearDebounce();
+            window.removeEventListener('resize', debounce);
         };
     }, [
         ref,

diff --git a/src/hooks/useWindowSize.js b/src/hooks/useWindowSize.js
@@ -1,30 +1,29 @@
 import { useState, useEffect } from 'react';
+import useDebounce from './useDebounceHook';
 
 function useWindowSize() {
     const w = window;
     const { innerHeight, innerWidth } = w;
     const [width, setWindowWidth] = useState(innerWidth);
     const [height, setWindowHeight] = useState(innerHeight);
-    let timeoutId;
+    const { debounceCallback, clearDebounce } = useDebounce();
 
     const handleResize = () => {
         const { innerHeight, innerWidth } = w;
         setWindowWidth(innerWidth);
         setWindowHeight(innerHeight);
     };
 
-    const debounceResize = () => {
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(handleResize, 100);
-    };
+    const debounce = () => debounceCallback(handleResize, 100);
 
     useEffect(() => {
-        w.addEventListener('resize', debounceResize);
-        w.addEventListener('orientationChange', debounceResize);
+        w.addEventListener('resize', debounce);
+        w.addEventListener('orientationChange', debounce);
+
         return () => {
-            w.removeEventListener('resize', debounceResize);
-            w.removeEventListener('orientationChange', debounceResize);
-            clearTimeout(timeoutId);
+            w.removeEventListener('resize', debounce);
+            w.removeEventListener('orientationChange', debounce);
+            clearDebounce();
         };
     }, []);
 

diff --git a/stories/atoms/Icon/Icon.stories.jsx b/stories/atoms/Icon/Icon.stories.jsx
@@ -1,6 +1,9 @@
 import React, { useEffect, useState, useRef } from 'react';
 
+// Helpers
 import { args, propCategory } from '../../assets/storybook.globals';
+
+// Components
 import {
     BusyLoader,
     Empty,
@@ -10,6 +13,8 @@ import {
     Toaster,
     Icon as IconComponent
 } from '../../../src';
+
+// Styles
 import './Icon.stories.scss';
 
 const ICONS = 'https://sharedassets.namerandomness.com/betcore-icons/selection.json';