fix(autoeffect): fix batching for auto effects

Author: solkimicreb

__tests__/batching.test.jsx

@@ -1,12 +1,18 @@
 import React, { Component } from 'react';
 import { render, cleanup, act } from '@testing-library/react/pure';
-// eslint-disable-next-line import/no-unresolved
-import { view, store, batch } from 'react-easy-state';
+import {
+  view,
+  store,
+  autoEffect,
+  clearEffect,
+  batch,
+  // eslint-disable-next-line import/no-unresolved
+} from 'react-easy-state';
 
 describe('batching', () => {
   afterEach(cleanup);
 
-  test('should batch state changes inside a batch() wrapper', () => {
+  test('should batch state changes inside a batch() wrapper for views', () => {
     let renderCount = 0;
     const person = store({ name: 'Bob' });
     const MyComp = view(() => {
@@ -27,6 +33,62 @@ describe('batching', () => {
     expect(renderCount).toBe(2);
   });
 
+  test('should batch state changes inside a batch() wrapper for global autoEffects', () => {
+    let numOfRuns = 0;
+    let name = '';
+
+    const person = store({ name: 'Bob' });
+    const effect = autoEffect(() => {
+      numOfRuns += 1;
+      name = person.name;
+    });
+
+    expect(name).toBe('Bob');
+    expect(numOfRuns).toBe(1);
+
+    batch(() => {
+      person.name = 'Ann';
+      person.name = 'Rick';
+    });
+
+    expect(name).toBe('Rick');
+    expect(numOfRuns).toBe(2);
+
+    clearEffect(effect);
+  });
+
+  test('should batch state changes inside a batch() wrapper for local autoEffects', () => {
+    let effectCount = 0;
+    let renderCount = 0;
+    let name = '';
+
+    const person = store({ name: 'Bob' });
+    const MyComp = view(() => {
+      renderCount += 1;
+      autoEffect(() => {
+        effectCount += 1;
+        name = person.name;
+      });
+      return <div>{person.name}</div>;
+    });
+
+    const { container } = render(<MyComp />);
+    expect(container).toHaveTextContent('Bob');
+    expect(name).toBe('Bob');
+    expect(effectCount).toBe(1);
+    expect(renderCount).toBe(1);
+
+    batch(() => {
+      person.name = 'Ann';
+      person.name = 'Rick';
+    });
+
+    expect(name).toBe('Rick');
+    expect(container).toHaveTextContent('Rick');
+    expect(effectCount).toBe(2);
+    expect(renderCount).toBe(2);
+  });
+
   test('should batch state changes inside a batch() wrapper in a class component', () => {
     let renderCount = 0;
     const person = store({ name: 'Bob' });

src/autoEffect.js

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { observe, unobserve } from '@nx-js/observer-util';
+import { queue } from './queue';
 
 import {
   isInsideFunctionComponent,
@@ -10,7 +11,9 @@ import {
 export function autoEffect(fn, deps = []) {
   if (isInsideFunctionComponent) {
     return useEffect(() => {
-      const observer = observe(fn);
+      const observer = observe(fn, {
+        scheduler: () => queue.add(observer),
+      });
       return () => unobserve(observer);
     }, deps);
   }
@@ -24,7 +27,11 @@ export function autoEffect(fn, deps = []) {
       'You cannot use autoEffect inside a render of a class component. Please use it in the constructor or lifecycle methods instead.',
     );
   }
-  return observe(fn);
+
+  const observer = observe(fn, {
+    scheduler: () => queue.add(observer),
+  });
+  return observer;
 }
 
 export { unobserve as clearEffect };