main 🧊 add use batched callback, add tests

Author: debabin

packages/core/src/bundle/helpers/createStore/createStore.js

@@ -17,6 +17,7 @@ import { useSyncExternalStore } from 'react';
  */
 export const createStore = (createState) => {
   let state;
+  let initialState;
   const listeners = new Set();
   const setState = (action) => {
     const nextState = typeof action === 'function' ? action(state) : action;
@@ -34,11 +35,11 @@ export const createStore = (createState) => {
     return () => listeners.delete(listener);
   };
   const getState = () => state;
-  const getInitialState = () => state;
+  const getInitialState = () => initialState;
   if (typeof createState === 'function') {
-    state = createState(setState, getState);
+    initialState = state = createState(setState, getState);
   } else {
-    state = createState;
+    initialState = state = createState;
   }
   function useStore(selector) {
     return useSyncExternalStore(
@@ -50,6 +51,7 @@ export const createStore = (createState) => {
   return {
     set: setState,
     get: getState,
+    getInitial: getInitialState,
     use: useStore,
     subscribe
   };

packages/core/src/bundle/hooks/useBatchedCallback/useBatchedCallback.js

@@ -0,0 +1,38 @@
+import { useMemo, useRef } from 'react';
+/**
+ * @name useBatchedCallback
+ * @description - Hook that batches calls and forwards them to a callback
+ * @category Utilities
+ * @usage medium
+ *
+ * @template Params The type of the params
+ * @param {(batch: Params[]) => void} callback The callback that receives a batch of calls
+ * @param {number} batchSize The maximum size of a batch before it is flushed
+ * @returns {BatchedCallback<Params>} The batched callback with flush and cancel helpers
+ *
+ * @example
+ * const batched = useBatchedCallback((batch) => console.log(batch), 5);
+ */
+export const useBatchedCallback = (callback, size) => {
+  const callbackRef = useRef(callback);
+  const sizeRef = useRef(size);
+  const queueRef = useRef([]);
+  callbackRef.current = callback;
+  sizeRef.current = size;
+  const flush = () => {
+    if (!queueRef.current.length) return;
+    const batch = queueRef.current;
+    queueRef.current = [];
+    callbackRef.current(batch);
+  };
+  const batched = useMemo(() => {
+    const batchedCallback = (...args) => {
+      queueRef.current.push(args);
+      if (queueRef.current.length >= sizeRef.current) flush();
+    };
+    batchedCallback.flush = flush;
+    batchedCallback.cancel = () => (queueRef.current = []);
+    return batchedCallback;
+  }, []);
+  return batched;
+};

packages/core/src/bundle/hooks/useOtpCredential/useOtpCredential.js

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 /**
  * @name useOtpCredential
  * @description - Hook that creates an otp credential
@@ -25,9 +25,12 @@ import { useRef, useState } from 'react';
 export const useOtpCredential = (...params) => {
   const supported =
     typeof navigator !== 'undefined' && 'OTPCredential' in navigator && !!navigator.OTPCredential;
-  const onSuccess = typeof params[0] === 'function' ? params[0] : params[0]?.onSuccess;
-  const onError = typeof params[0] === 'function' ? params[0]?.onError : undefined;
-  const [aborted, setAborted] = useState(false);
+  const options =
+    typeof params[0] === 'object'
+      ? params[0]
+      : {
+          onSuccess: params[0]
+        };
   const abortControllerRef = useRef(new AbortController());
   const get = async () => {
     if (!supported) return;
@@ -37,17 +40,15 @@ export const useOtpCredential = (...params) => {
         otp: { transport: ['sms'] },
         signal: abortControllerRef.current.signal
       });
-      onSuccess?.(credential);
-      setAborted(false);
+      options.onSuccess?.(credential);
       return credential;
     } catch (error) {
-      onError?.(error);
+      options.onError?.(error);
     }
   };
   const abort = () => {
     abortControllerRef.current.abort();
     abortControllerRef.current = new AbortController();
-    abortControllerRef.current.signal.onabort = () => setAborted(true);
   };
-  return { supported, abort, aborted, get };
+  return { supported, abort, get };
 };

packages/core/src/bundle/hooks/useSpeechRecognition/useSpeechRecognition.js

@@ -41,7 +41,7 @@ export const useSpeechRecognition = (options = {}) => {
   const [final, setFinal] = useState(false);
   const [error, setError] = useState(null);
   const [recognition] = useState(() => {
-    if (!supported) return {};
+    if (!supported) return undefined;
     const SpeechRecognition = getSpeechRecognition();
     const speechRecognition = new SpeechRecognition();
     speechRecognition.continuous = continuous;
@@ -54,10 +54,6 @@ export const useSpeechRecognition = (options = {}) => {
       setFinal(false);
       onStart?.();
     };
-    speechRecognition.onend = () => {
-      setListening(false);
-      onEnd?.();
-    };
     speechRecognition.onerror = (event) => {
       setError(event);
       setListening(false);
@@ -66,19 +62,21 @@ export const useSpeechRecognition = (options = {}) => {
     speechRecognition.onresult = (event) => {
       const currentResult = event.results[event.resultIndex];
       const { transcript } = currentResult[0];
+      setListening(false);
       setTranscript(transcript);
       setError(null);
       onResult?.(event);
     };
     speechRecognition.onend = () => {
       setListening(false);
+      onEnd?.();
       speechRecognition.lang = language;
     };
     return speechRecognition;
   });
-  useEffect(() => () => recognition.stop(), []);
-  const start = () => recognition.start();
-  const stop = () => recognition.stop();
+  useEffect(() => () => recognition?.stop(), []);
+  const start = () => recognition?.start();
+  const stop = () => recognition?.stop();
   const toggle = (value = !listening) => {
     if (value) return start();
     stop();

packages/core/src/bundle/hooks/useTextareaAutosize/useTextareaAutosize.js

@@ -17,6 +17,14 @@ import { useRefState } from '../useRefState/useRefState';
  * const { value, setValue, clear } = useTextareaAutosize(ref);
  *
  * @overload
+ * @param {HookTarget} target The target textarea element
+ * @param {string} initialValue The initial value for the textarea
+ * @returns {UseTextareaAutosizeReturn} An object containing value, setValue and clear
+ *
+ * @example
+ * const { value, setValue, clear } = useTextareaAutosize(ref, 'initial');
+ *
+ * @overload
  * @template Target The textarea element type
  * @param {string} initialValue The initial value for the textarea
  * @returns {UseTextareaAutosizeReturn & { ref: StateRef<Target> }} An object containing ref, value, setValue and clear
@@ -36,13 +44,16 @@ import { useRefState } from '../useRefState/useRefState';
 export const useTextareaAutosize = (...params) => {
   const target = isTarget(params[0]) ? params[0] : undefined;
   const options = target
-    ? params[1]
-    : typeof params[0] === 'string'
-      ? { initialValue: params[0] }
-      : params[0];
+    ? typeof params[1] === 'object'
+      ? params[1]
+      : { initialValue: params[1] }
+    : typeof params[0] === 'object'
+      ? params[0]
+      : { initialValue: params[0] };
   const [value, setValue] = useState(options?.initialValue ?? '');
   const internalRef = useRefState();
   const textareaRef = useRef(null);
+  const scrollHeightRef = useRef(0);
   const onTextareaResize = () => {
     const textarea = textareaRef.current;
     if (!textarea) return;
@@ -55,7 +66,17 @@ export const useTextareaAutosize = (...params) => {
     textarea.style.height = `${scrollHeight}px`;
     textarea.style.minHeight = originalMinHeight;
     textarea.style.maxHeight = originalMaxHeight;
-    options?.onResize?.();
+    if (scrollHeight !== scrollHeightRef.current) options?.onResize?.();
+    scrollHeightRef.current = scrollHeight;
+  };
+  const setTextareaValue = (newValue) => {
+    setValue(newValue);
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.value = newValue;
+    requestAnimationFrame(() => {
+      onTextareaResize();
+    });
   };
   useEffect(() => {
     if (!target && !internalRef.state) return;
@@ -66,7 +87,7 @@ export const useTextareaAutosize = (...params) => {
     onTextareaResize();
     const onInput = (event) => {
       const newValue = event.target.value;
-      setValue(newValue);
+      setTextareaValue(newValue);
       requestAnimationFrame(() => {
         onTextareaResize();
       });
@@ -82,36 +103,18 @@ export const useTextareaAutosize = (...params) => {
       element.removeEventListener('input', onInput);
       element.removeEventListener('resize', onResize);
     };
-  }, [target, internalRef.state, isTarget.getRefState(target), options?.initialValue]);
-  useEffect(() => {
-    const textarea = textareaRef.current;
-    if (!textarea) return;
-    textarea.value = value;
-    requestAnimationFrame(() => {
-      onTextareaResize();
-    });
-  }, [value]);
-  const setTextareaValue = (newValue) => {
-    setValue(newValue);
-    const textarea = textareaRef.current;
-    if (textarea) {
-      textarea.value = newValue;
-      requestAnimationFrame(() => {
-        onTextareaResize();
-      });
-    }
-  };
+  }, [target, internalRef.state, isTarget.getRefState(target)]);
   const clear = () => setValue('');
   if (target)
     return {
       value,
-      setValue: setTextareaValue,
+      set: setTextareaValue,
       clear
     };
   return {
     ref: internalRef,
     value,
-    setValue: setTextareaValue,
+    set: setTextareaValue,
     clear
   };
 };

packages/core/src/bundle/hooks/utilities.js

@@ -1,3 +1,4 @@
+export * from './useBatchedCallback/useBatchedCallback';
 // base
 export * from './useConst/useConst';
 // timing

packages/core/src/helpers/createStore/createStore.test.ts

@@ -134,9 +134,9 @@ it('Should work correct with array state', () => {
 });
 
 it('Should return initial state after state changes', () => {
-  const counterStore = createStore<number>(0)
+  const store = createStore<{ count: number }>({ count: 0 });
 
-  counterStore.set(1)
+  store.set({ count: 1 });
 
-  expect(store.getInitialState()).toEqual(0)
-})
+  expect(store.getInitial()).toEqual({ count: 0 });
+});

packages/core/src/helpers/createStore/createStore.ts

@@ -10,14 +10,14 @@ type StoreCreator<Value> = (
 ) => Value;
 
 export interface StoreApi<Value> {
-  getInitialState: () => Value;
   get: () => Value;
+  getInitial: () => Value;
   set: (action: StoreSetAction<Value>) => void;
   subscribe: (listener: StoreListener<Value>) => () => void;
 
-  use(): Value;
-  use<Selected>(selector: (state: Value) => Selected): Selected;
-  use<Selected>(selector?: (state: Value) => Selected): Value | Selected;
+  use: (() => Value) &
+    (<Selected>(selector: (state: Value) => Selected) => Selected) &
+    (<Selected>(selector?: (state: Value) => Selected) => Selected | Value);
 }
 
 /**
@@ -84,7 +84,7 @@ export const createStore = <Value>(createState: StoreCreator<Value> | Value): St
   return {
     set: setState,
     get: getState,
-    getInitialState,
+    getInitial: getInitialState,
     use: useStore,
     subscribe
   };

packages/core/src/hooks/useBatchedCallback/useBatchedCallback.demo.tsx

@@ -0,0 +1,46 @@
+import { useBatchedCallback, useCounter } from '@siberiacancode/reactuse';
+import { useState } from 'react';
+
+const Demo = () => {
+  const [batches, setBatches] = useState<number[][]>([]);
+  const [currentBatch, setCurrentBatch] = useState<number[]>([]);
+  const counter = useCounter(0);
+
+  const batchedNumbers = useBatchedCallback((batch: [number][]) => {
+    const numbers = batch.map(([num]) => num);
+    setBatches((currentBatches) => [...currentBatches, numbers]);
+    counter.inc(numbers.reduce((acc, number) => acc + number, 0));
+    setCurrentBatch([]);
+  }, 5);
+
+  const onAdd = () => {
+    const random = Math.floor(Math.random() * 100);
+    setCurrentBatch((currentBatch) => (currentBatch.length >= 5 ? [] : [...currentBatch, random]));
+    batchedNumbers(random);
+  };
+
+  return (
+    <>
+      <div className='mb-4 flex flex-col gap-2'>
+        <label>Batched random numbers (flush every 5 adds)</label>
+      </div>
+
+      <div className='text-muted-foreground text-xs'>
+        Last batch: {batches.at(-1)?.join(', ') ?? '—'}
+      </div>
+      <div className='text-muted-foreground text-xs'>
+        Current batch: {currentBatch.length ? currentBatch.join(', ') : '—'}
+      </div>
+
+      <button className='mt-4 rounded px-3 py-2 text-white' type='button' onClick={onAdd}>
+        Add random
+      </button>
+      <div className='flex gap-4 text-sm'>
+        <div>Total sum: {counter.value}</div>
+        <div>Total batches: {batches.length}</div>
+      </div>
+    </>
+  );
+};
+
+export default Demo;