main 🧊 add thorttle hooks

Author: debabin

docs/.vitepress/config.mts

@@ -40,6 +40,15 @@ export default async () => {
       }
     },
     transformPageData: (pageData) => {
+      pageData.frontmatter.head ??= []
+      pageData.frontmatter.head.push([
+        'meta',
+        {
+          name: 'og:image',
+          content: 'https://repository-images.githubusercontent.com/799880708/be8887a4-0cf5-4929-a5f0-dba8d70a7d1f'
+        }
+      ])
+
       if (pageData.relativePath === 'index.md') {
         pageData.frontmatter.features = homePageFeatures;
       }

src/hooks/index.ts

@@ -100,6 +100,8 @@ export * from './useStopwatch/useStopwatch';
 export * from './useStorage/useStorage';
 export * from './useTextDirection/useTextDirection';
 export * from './useTextSelection/useTextSelection';
+export * from './useThrottleCallback/useThrottleCallback';
+export * from './useThrottleValue/useThrottleValue';
 export * from './useTime/useTime';
 export * from './useTimeout/useTimeout';
 export * from './useTimer/useTimer';

src/hooks/useDebounceCallback/useDebounceCallback.ts

@@ -16,7 +16,7 @@ import { useEvent } from '../useEvent/useEvent';
  * @returns {(...args: Params) => Return} The callback with debounce
  *
  * @example
- * const debounced = useDebounceCallback(() => console.log('callback'), 500);
+ * const debouncedCallback = useDebounceCallback(() => console.log('callback'), 500);
  */
 export const useDebounceCallback = <Params extends unknown[], Return>(
   callback: (...args: Params) => Return,

src/hooks/useThrottleCallback/useThrottleCallback.demo.tsx

@@ -0,0 +1,32 @@
+import { useCounter } from '../useCounter/useCounter';
+import { useThrottleCallback } from './useThrottleCallback';
+
+const Demo = () => {
+  const clickCounter = useCounter();
+  const throttledCounter = useCounter();
+
+
+  const throttledIncrement = useThrottleCallback(throttledCounter.inc, 1000);
+
+  const onClick = () => {
+    throttledIncrement();
+    clickCounter.inc();
+  }
+
+  return (
+    <div>
+      <p>
+        Button clicked: <code>{clickCounter.value}</code>
+      </p>
+      <p>
+        Event handler called: <code>{throttledCounter.value}</code>
+      </p>
+      <p className='text-sm text-zinc-400'>Delay is set to 1000ms for this demo.</p>
+      <button type='button' onClick={onClick}>
+        Smash me my friend
+      </button>
+    </div>
+  );
+};
+
+export default Demo;

src/hooks/useThrottleCallback/useThrottleCallback.ts

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+
+import { throttle } from '@/utils/helpers';
+
+import { useEvent } from '../useEvent/useEvent';
+
+/**
+ * @name useThrottleCallback
+ * @description - Hook that creates a throttled callback and returns a stable reference of it
+ * @category Utilities
+ *
+ * @template Params The type of the params
+ * @template Return The type of the return
+ * @param {(...args: Params) => Return} callback The callback function
+ * @param {number} delay The delay in milliseconds
+ * @returns {(...args: Params) => Return} The callback with throttle
+ *
+ * @example
+ * const throttled = useThrottleCallback(() => console.log('callback'), 500);
+ */
+export const useThrottleCallback = <Params extends unknown[], Return>(
+  callback: (...args: Params) => Return,
+  delay: number
+) => {
+  const internalCallback = useEvent(callback);
+  const throttled = useMemo(() => throttle(internalCallback, delay), [delay]);
+
+  return throttled;
+};

src/hooks/useThrottleValue/useThrottleValue.demo.tsx

@@ -0,0 +1,27 @@
+import { useCounter } from '../useCounter/useCounter';
+import { useThrottleValue } from './useThrottleValue';
+
+const Demo = () => {
+  const counter = useCounter();
+
+  const throttledCounterCount = useThrottleValue(counter.value, 500);
+
+  return (
+    <div>
+      <p>
+        Value: <code>{counter.value}</code>
+      </p>
+      <p>
+        Throttled value: <code>{throttledCounterCount}</code>
+      </p>
+      <button type='button' onClick={() => counter.inc()}>
+        Increment
+      </button>
+      <button type='button' onClick={() => counter.dec()}>
+        Decrement
+      </button>
+    </div>
+  );
+};
+
+export default Demo;

src/hooks/useThrottleValue/useThrottleValue.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { useThrottleCallback } from '../useThrottleCallback/useThrottleCallback';
+
+/**
+ * @name useThrottleValue
+ * @description - Hook that creates a throttled value and returns a stable reference of it
+ * @category Utilities
+ *
+ * @template Value The type of the value
+ * @param {Value} value The value to be throttled
+ * @param {number} delay The delay in milliseconds
+ * @returns {Value} The throttled value
+ *
+ * @example
+ * const throttledValue = useThrottleValue(value, 500);
+ */
+export const useThrottleValue = <Value>(value: Value, delay: number) => {
+  const previousValueRef = useRef(value);
+  const [throttledValue, setDebounceValue] = useState(value);
+
+  const throttledSetState = useThrottleCallback(setDebounceValue, delay);
+
+  useEffect(() => {
+    if (previousValueRef.current === value) return;
+    throttledSetState(value);
+    previousValueRef.current = value;
+  }, [value]);
+
+  return throttledValue;
+};