fix: correct nested batch behavior. Solves #217

Author: theKashey

src/utils/__tests__/batched-updates.test.js

@@ -56,13 +56,20 @@ describe('batch', () => {
     const child = jest.fn().mockReturnValue(null);
     render(<TestComponent>{child}</TestComponent>);
     const update = child.mock.calls[0][0];
-    act(() => update());
+    act(() => {
+      update();
+      update();
+      update();
+    });
+
+    // nothing should be yet called
+    expect(child.mock.calls[2]).toEqual(undefined);
 
     // scheduler uses timeouts on non-browser envs
     await act(() => new Promise((r) => setTimeout(r, 10)));
 
     // assertion no longer relevant with React 18+
-    expect(child.mock.calls[2]).toEqual([expect.any(Function), 1, 1]);
+    expect(child.mock.calls[2]).toEqual([expect.any(Function), 3, 1]);
 
     supportsMock.mockRestore();
   });

src/utils/batched-updates.js

@@ -8,7 +8,7 @@ import {
 import defaults from '../defaults';
 import supports from './supported-features';
 
-let isInsideBatchedSchedule = false;
+let isInsideBatchedSchedule = 0;
 
 export function batch(fn) {
   // if we are in node/tests or nested schedule
@@ -20,11 +20,12 @@ export function batch(fn) {
     return unstable_batchedUpdates(fn);
   }
 
-  isInsideBatchedSchedule = true;
+  isInsideBatchedSchedule = 0;
   // Use ImmediatePriority as it has -1ms timeout
   // https://github.com/facebook/react/blob/main/packages/scheduler/src/forks/Scheduler.js#L65
   return scheduleCallback(ImmediatePriority, function scheduleBatchedUpdates() {
+    isInsideBatchedSchedule++;
     unstable_batchedUpdates(fn);
-    isInsideBatchedSchedule = false;
+    isInsideBatchedSchedule--;
   });
 }