feat: implement batching algorithm and integrate it

Author: MarufZak

packages/react/src/core/useEffect.tsx

@@ -1,4 +1,4 @@
-import { subscribeToStateChange } from "./useState";
+import { flushStateUpdates, subscribeToStateChange } from "./useState";
 import { compareArrays, getCallerStack } from "./utils";
 import componentRegistry from "./componentRegistry";
 
@@ -23,7 +23,8 @@ const effectsStore: Record<string, StoreItemType> = {};
 const subscribeToComponentRegistryComplete = (callback: Function) => {
   return componentRegistry.subscribeToStateChange((state) => {
     if (state === "completed") {
-      return callback();
+      callback();
+      flushStateUpdates();
     }
   });
 };
@@ -45,6 +46,7 @@ const useEffect = (
       ],
     };
 
+    // refresh the cleanup function
     subscribeToComponentRegistryComplete(() => {
       effectsStore[callerStack].effects[0].cleanupFunction = callback();
     });

packages/react/src/core/useState.ts

@@ -5,7 +5,10 @@ import { getCallerStack } from "./utils";
 
 type StateType = {
   cursor: number;
-  values: any[];
+  values: {
+    value: any;
+    updateQueue: any[];
+  }[];
 };
 type StateSubscriberType = () => void;
 
@@ -29,19 +32,26 @@ function useState<T>(
       initialValue instanceof Function ? initialValue() : initialValue;
     states[stringCallerStack] = {
       cursor: 0,
-      values: [savedValue],
+      values: [
+        {
+          updateQueue: [],
+          value: savedValue,
+        },
+      ],
     };
   }
 
   const currentCursor = states[stringCallerStack].cursor;
   const currentValues = states[stringCallerStack].values;
+  const currentUpdateQueue =
+    states[stringCallerStack].values[currentCursor].updateQueue;
 
-  if (currentValues[currentCursor] === undefined) {
-    currentValues[currentCursor] = initialValue;
+  if (currentValues[currentCursor].value === undefined) {
+    currentValues[currentCursor].value = initialValue;
   }
 
   const performUpdate: UpdaterFunctionType<T> = (newValue) => {
-    if (Object.is(currentValues[currentCursor], newValue)) {
+    if (Object.is(currentValues[currentCursor].value, newValue)) {
       return;
     }
 
@@ -54,17 +64,17 @@ function useState<T>(
       subscriber();
     }
 
-    currentValues[currentCursor] =
-      newValue instanceof Function
-        ? newValue(currentValues[currentCursor])
-        : newValue;
-
-    ReactDOM.render();
+    // for batching
+    const latestValue =
+      currentUpdateQueue.at(-1) || currentValues[currentCursor].value;
+    const queueItem =
+      newValue instanceof Function ? newValue(latestValue) : newValue;
+    currentUpdateQueue.push(queueItem);
   };
 
   states[stringCallerStack].cursor++;
 
-  return [currentValues[currentCursor], performUpdate];
+  return [currentValues[currentCursor].value, performUpdate];
 }
 
 componentRegistry.subscribeToStoreChange(
@@ -84,4 +94,20 @@ export function subscribeToStateChange(callback: StateSubscriberType) {
   stateSubscribers.push(callback);
 }
 
+export function flushStateUpdates() {
+  for (const key in states) {
+    for (let i = 0; i < states[key].values.length; i++) {
+      const state = states[key].values[i];
+      // prevent from falsy undefined assignment
+      if (state.updateQueue.length === 0) {
+        continue;
+      }
+
+      state.value = state.updateQueue.at(-1);
+      state.updateQueue = [];
+    }
+  }
+  ReactDOM.render();
+}
+
 export default useState;

packages/react/src/dom/eventRegistry.tsx

@@ -1,3 +1,5 @@
+import { flushStateUpdates } from "../core/useState";
+
 type EventType = string;
 type EventTargetType = HTMLElement | SVGElement;
 type EventHandlerType = (event: Event) => void;
@@ -27,6 +29,7 @@ class EventRegistry {
     const eventHandlerWrapper = (e: Event) => {
       if (elementAttachableEvents.includes(event)) {
         eventHandler(e);
+        flushStateUpdates();
         return;
       }
 
@@ -35,6 +38,7 @@ class EventRegistry {
       }
 
       eventHandler(e);
+      flushStateUpdates();
     };
 
     if (this.hasEvent(event)) {