main 🧊 rework throttle, fix use element size

Author: babin

src/hooks/useElementSize/useElementSize.demo.tsx

@@ -8,7 +8,6 @@ const Demo = () => {
       <p>Resize the box to see changes</p>
       <textarea
         ref={elementSize.ref}
-        className='200px 200px'
         style={{ resize: 'both' }}
         value={`width: ${elementSize.value.width}\nheight: ${elementSize.value.height}`}
       />

src/hooks/useElementSize/useElementSize.ts

@@ -68,10 +68,10 @@ export const useElementSize = ((...params: any[]) => {
   useEffect(() => {
     if (!target && !internalRef) return;
     const element = (target ? getElement(target) : internalRef) as Element;
-    if (element) return;
+
+    if (!element) return;
     const observer = new ResizeObserver(([entry]) => {
       const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0];
-
       setSize({ width, height });
     });
 

src/hooks/useThrottleValue/useThrottleValue.demo.tsx

@@ -4,7 +4,7 @@ import { useThrottleValue } from './useThrottleValue';
 const Demo = () => {
   const counter = useCounter();
 
-  const throttledCounterCount = useThrottleValue(counter.value, 500);
+  const throttledCounterCount = useThrottleValue(counter.value, 2000);
 
   return (
     <div>

src/hooks/useThrottleValue/useThrottleValue.ts

@@ -17,9 +17,9 @@ import { useThrottleCallback } from '../useThrottleCallback/useThrottleCallback'
  */
 export const useThrottleValue = <Value>(value: Value, delay: number) => {
   const previousValueRef = useRef(value);
-  const [throttledValue, setDebounceValue] = useState(value);
+  const [throttledValue, setThrottleValue] = useState(value);
 
-  const throttledSetState = useThrottleCallback(setDebounceValue, delay);
+  const throttledSetState = useThrottleCallback(setThrottleValue, delay);
 
   useEffect(() => {
     if (previousValueRef.current === value) return;

src/utils/helpers/throttle.ts

@@ -3,14 +3,27 @@ export const throttle = <Params extends any[]>(
   delay: number
 ): ((...args: Params) => void) => {
   let isCalled = false;
+  let lastArgs: Params | null = null;
 
-  return function (this: any, ...args) {
-    if (!isCalled) {
-      callback.apply(this, args);
-      isCalled = true;
-      setTimeout(() => {
-        isCalled = false;
-      }, delay);
+  const timer = () => {
+    if (!lastArgs) {
+      isCalled = false;
+      return;
     }
+
+    callback.apply(this, lastArgs);
+    lastArgs = null;
+    setTimeout(timer, delay);
+  };
+
+  return function (this: any, ...args: Params) {
+    if (isCalled) {
+      lastArgs = args;
+      return;
+    }
+
+    callback.apply(this, args);
+    isCalled = true;
+    setTimeout(timer, delay);
   };
 };