Used batch

Author: erikras

package.json

@@ -1,6 +1,6 @@
 {
   "name": "final-form-calculate",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description":
     "Decorator for calculating field values based on other field values in 🏁 Final Form",
   "main": "dist/final-form-calculate.cjs.js",

src/decorator.js

@@ -9,31 +9,33 @@ const createDecorator = (...calculations: Calculation[]): Decorator => (
   let previousValues = {}
   const unsubscribe = form.subscribe(
     ({ values }) => {
-      const runUpdates = (field: string, updates: Updates) => {
-        const next = getIn(values, field)
-        const previous = getIn(previousValues, field)
-        if (next !== previous) {
-          Object.keys(updates).forEach(destField => {
-            const update = updates[destField]
-            form.change(destField, update(next, values))
-          })
-        }
-      }
-      const fields = form.getRegisteredFields()
-      calculations.forEach(({ field, updates }) => {
-        if (typeof field === 'string') {
-          runUpdates(field, updates)
-        } else {
-          // field is a regex
-          const regex = (field: RegExp)
-          fields.forEach(fieldName => {
-            if (regex.test(fieldName)) {
-              runUpdates(fieldName, updates)
-            }
-          })
+      form.batch(() => {
+        const runUpdates = (field: string, updates: Updates) => {
+          const next = getIn(values, field)
+          const previous = getIn(previousValues, field)
+          if (next !== previous) {
+            Object.keys(updates).forEach(destField => {
+              const update = updates[destField]
+              form.change(destField, update(next, values))
+            })
+          }
         }
+        const fields = form.getRegisteredFields()
+        calculations.forEach(({ field, updates }) => {
+          if (typeof field === 'string') {
+            runUpdates(field, updates)
+          } else {
+            // field is a regex
+            const regex = (field: RegExp)
+            fields.forEach(fieldName => {
+              if (regex.test(fieldName)) {
+                runUpdates(fieldName, updates)
+              }
+            })
+          }
+        })
+        previousValues = values
       })
-      previousValues = values
     },
     { values: true }
   )

src/decorator.test.js

@@ -178,7 +178,7 @@ describe('decorator', () => {
     form.change('items[0]', 3)
 
     expect(sum).toHaveBeenCalled()
-    expect(sum).toHaveBeenCalledTimes(2)
+    expect(sum).toHaveBeenCalledTimes(1)
 
     expect(spy).toHaveBeenCalledTimes(3)
     expect(spy.mock.calls[1][0].values).toEqual({ items: [3] })
@@ -188,7 +188,7 @@ describe('decorator', () => {
     form.change('items[1]', 4)
 
     expect(sum).toHaveBeenCalled()
-    expect(sum).toHaveBeenCalledTimes(4)
+    expect(sum).toHaveBeenCalledTimes(2)
 
     expect(spy).toHaveBeenCalledTimes(5)
     expect(spy.mock.calls[3][0].values).toEqual({ items: [3, 4], total: 3 })
@@ -198,7 +198,7 @@ describe('decorator', () => {
     form.change('items[2]', 5)
 
     expect(sum).toHaveBeenCalled()
-    expect(sum).toHaveBeenCalledTimes(6)
+    expect(sum).toHaveBeenCalledTimes(3)
 
     expect(spy).toHaveBeenCalledTimes(7)
     expect(spy.mock.calls[5][0].values).toEqual({ items: [3, 4, 5], total: 7 })