perf: improve performance for $onFieldChange callback

dist/react-formutil.cjs.development.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var PropTypes = require('prop-types');
 var warning = require('warning');
+var reactDom = require('react-dom');
 var reactIs = require('react-is');
 var hoistStatics = require('hoist-non-react-statics');
 var isEqual = require('react-fast-compare');
@@ -655,7 +656,9 @@ var Form = /*#__PURE__*/function (_Component) {
         if ($curRegistered) {
           cancelFrame(_this.$$duplicateTimer);
           _this.$$regDuplications[name] = [$curRegistered, $handler];
-          _this.$$duplicateTimer = requestFrame(_this.$$checkDuplication);
+          _this.$$duplicateTimer = requestFrame(function () {
+            return reactDom.unstable_batchedUpdates(_this.$$checkDuplication);
+          });
         } else {
           _this.$$fieldChangedQueue.push({
             name: name,
@@ -1177,7 +1180,7 @@ var Form = /*#__PURE__*/function (_Component) {
       cancelFrame(this.$$triggerChangeTimer); // ensure this calls to access the newest $formutil
 
       this.$$triggerChangeTimer = requestFrame(function () {
-        _this2.$$triggerFormChange();
+        reactDom.unstable_batchedUpdates(_this2.$$triggerFormChange);
       });
     }
   }, {

dist/react-formutil.esm.development.js

@@ -1,6 +1,7 @@
 import React, { createContext, createElement, Children, cloneElement, Component, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
+import { unstable_batchedUpdates } from 'react-dom';
 import reactIs from 'react-is';
 import hoistStatics from 'hoist-non-react-statics';
 import isEqual from 'react-fast-compare';
@@ -588,7 +589,9 @@ var Form = /*#__PURE__*/function (_Component) {
         if ($curRegistered) {
           cancelFrame(_this.$$duplicateTimer);
           _this.$$regDuplications[name] = [$curRegistered, $handler];
-          _this.$$duplicateTimer = requestFrame(_this.$$checkDuplication);
+          _this.$$duplicateTimer = requestFrame(function () {
+            return unstable_batchedUpdates(_this.$$checkDuplication);
+          });
         } else {
           _this.$$fieldChangedQueue.push({
             name: name,
@@ -1110,7 +1113,7 @@ var Form = /*#__PURE__*/function (_Component) {
       cancelFrame(this.$$triggerChangeTimer); // ensure this calls to access the newest $formutil
 
       this.$$triggerChangeTimer = requestFrame(function () {
-        _this2.$$triggerFormChange();
+        unstable_batchedUpdates(_this2.$$triggerFormChange);
       });
     }
   }, {

dist/react-formutil.umd.development.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactFormutil = {}, global.React, global.PropTypes));
-}(this, (function (exports, React, PropTypes) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('react-dom')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'react-dom'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactFormutil = {}, global.React, global.PropTypes, global.ReactDOM));
+}(this, (function (exports, React, PropTypes, reactDom) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -949,7 +949,9 @@
           if ($curRegistered) {
             cancelFrame(_this.$$duplicateTimer);
             _this.$$regDuplications[name] = [$curRegistered, $handler];
-            _this.$$duplicateTimer = requestFrame(_this.$$checkDuplication);
+            _this.$$duplicateTimer = requestFrame(function () {
+              return reactDom.unstable_batchedUpdates(_this.$$checkDuplication);
+            });
           } else {
             _this.$$fieldChangedQueue.push({
               name: name,
@@ -1471,7 +1473,7 @@
         cancelFrame(this.$$triggerChangeTimer); // ensure this calls to access the newest $formutil
 
         this.$$triggerChangeTimer = requestFrame(function () {
-          _this2.$$triggerFormChange();
+          reactDom.unstable_batchedUpdates(_this2.$$triggerFormChange);
         });
       }
     }, {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-formutil",
-  "version": "1.0.21",
+  "version": "1.1.0",
   "description": "Happy to build the forms in React ^_^",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

src/Form.js

@@ -1,6 +1,7 @@
 import React, { Component, Children, cloneElement, createElement } from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
+import { unstable_batchedUpdates } from 'react-dom';
 import FormContext from './context';
 import * as utils from './utils';
 
@@ -102,7 +103,7 @@ class Form extends Component {
                 cancelFrame(this.$$duplicateTimer);
 
                 this.$$regDuplications[name] = [$curRegistered, $handler];
-                this.$$duplicateTimer = requestFrame(this.$$checkDuplication);
+                this.$$duplicateTimer = requestFrame(() => unstable_batchedUpdates(this.$$checkDuplication));
             } else {
                 this.$$fieldChangedQueue.push({
                     name,
@@ -413,7 +414,7 @@ class Form extends Component {
 
         // ensure this calls to access the newest $formutil
         this.$$triggerChangeTimer = requestFrame(() => {
-            this.$$triggerFormChange();
+            unstable_batchedUpdates(this.$$triggerFormChange);
         });
     }