cx 26.7.2 → 26.7.3

package/dist/ui.js

@@ -2129,10 +2129,10 @@ class Cx extends VDOM.Component {
 		}
 		this.state = {
 			deferToken: 0,
+			data: props.subscribe ? this.store.getData() : null,
 		};
 		if (props.subscribe) {
 			this.unsubscribe = this.store.subscribe(this.update.bind(this));
-			this.state.data = this.store.getData();
 		}
 		this.onStateUpdateCompleted = this.onStateUpdateCompleted.bind(this);
 		this.flags = {};
@@ -2214,19 +2214,22 @@ class Cx extends VDOM.Component {
 			}
 		} else {
 			// standard mode: coalesce sequential store commands into a single deferred update
-			if (!this.pendingUpdateTimer) {
-				notifyBatchedUpdateStarting();
-				this.pendingUpdateTimer = setTimeout(() => {
-					delete this.pendingUpdateTimer;
-					// read fresh data at fire time so the coalesced update renders the latest store state
-					this.setState(
-						{
-							data: this.store.getData(),
-						},
-						notifyBatchedUpdateCompleted,
-					);
-				}, 0);
-			}
+			this.scheduleStateUpdate();
+		}
+	}
+	scheduleStateUpdate() {
+		if (!this.pendingUpdateTimer) {
+			notifyBatchedUpdateStarting();
+			this.pendingUpdateTimer = setTimeout(() => {
+				delete this.pendingUpdateTimer;
+				// read fresh data at fire time so the coalesced update renders the latest store state
+				this.setState(
+					{
+						data: this.store.getData(),
+					},
+					notifyBatchedUpdateCompleted,
+				);
+			}, 0);
 		}
 	}
 	// Completion callback for the synchronous setState above. If the store changed while that update was
@@ -2236,17 +2239,19 @@ class Cx extends VDOM.Component {
 	// a genuinely non-converging update loop is still caught by React's own max-update-depth guard.
 	onStateUpdateCompleted() {
 		let latestData = this.store.getData();
+		notifyBatchedUpdateCompleted();
 		if (this.state.data === latestData) {
 			this.stateUpdateDepth = 0;
-			notifyBatchedUpdateCompleted();
 		} else {
 			this.stateUpdateDepth++;
-			this.setState(
-				{
-					data: latestData,
-				},
-				this.onStateUpdateCompleted,
-			);
+			if (this.stateUpdateDepth < 20 && isBatchingUpdates())
+				this.setState(
+					{
+						data: latestData,
+					},
+					this.onStateUpdateCompleted,
+				);
+			else this.scheduleStateUpdate();
 		}
 	}
 	waitForIdle() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx",
-  "version": "26.7.2",
+  "version": "26.7.3",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {

package/src/ui/Cx.tsx

@@ -73,11 +73,11 @@ export class Cx extends VDOM.Component<CxProps, CxState> {
 
       this.state = {
          deferToken: 0,
+         data: props.subscribe ? this.store.getData() : null,
       };
 
       if (props.subscribe) {
          this.unsubscribe = this.store.subscribe(this.update.bind(this));
-         (this.state as any).data = this.store.getData();
       }
 
       this.onStateUpdateCompleted = this.onStateUpdateCompleted.bind(this);
@@ -178,14 +178,18 @@ export class Cx extends VDOM.Component<CxProps, CxState> {
          }
       } else {
          // standard mode: coalesce sequential store commands into a single deferred update
-         if (!this.pendingUpdateTimer) {
-            notifyBatchedUpdateStarting();
-            this.pendingUpdateTimer = setTimeout(() => {
-               delete this.pendingUpdateTimer;
-               // read fresh data at fire time so the coalesced update renders the latest store state
-               this.setState({ data: this.store.getData() }, notifyBatchedUpdateCompleted);
-            }, 0);
-         }
+         this.scheduleStateUpdate();
+      }
+   }
+
+   scheduleStateUpdate() {
+      if (!this.pendingUpdateTimer) {
+         notifyBatchedUpdateStarting();
+         this.pendingUpdateTimer = setTimeout(() => {
+            delete this.pendingUpdateTimer;
+            // read fresh data at fire time so the coalesced update renders the latest store state
+            this.setState({ data: this.store.getData() }, notifyBatchedUpdateCompleted);
+         }, 0);
       }
    }
 
@@ -196,12 +200,14 @@ export class Cx extends VDOM.Component<CxProps, CxState> {
    // a genuinely non-converging update loop is still caught by React's own max-update-depth guard.
    onStateUpdateCompleted() {
       let latestData = this.store.getData();
+      notifyBatchedUpdateCompleted();
       if (this.state.data === latestData) {
          this.stateUpdateDepth = 0;
-         notifyBatchedUpdateCompleted();
       } else {
          this.stateUpdateDepth++;
-         this.setState({ data: latestData }, this.onStateUpdateCompleted);
+         if (this.stateUpdateDepth < 20 && isBatchingUpdates())
+            this.setState({ data: latestData }, this.onStateUpdateCompleted);
+         else this.scheduleStateUpdate();
       }
    }