cx 26.7.1 → 26.7.3

package/dist/ui.js

@@ -2094,30 +2094,6 @@ class LinkedListsNode {
 	}
 }
 
-// Optional guard (opt in per-instance via the `limitSyncBursts` prop) against React's "Maximum update depth
-// exceeded" during very large synchronous render bursts. On the initial render of a large document the store
-// can be mutated thousands of times within a single React commit: every Instance.setState wraps store.notify()
-// in batchUpdates(), so isBatchingUpdates() stays true and a subscribed Cx takes its *synchronous* setState
-// branch on each notification. React counts those as nested render-phase updates and aborts past ~50
-// (surfacing as the recoverable "error during concurrent rendering"). When a Cx opts in, once back-to-back
-// updates exceed the limit it falls back to the coalesced setTimeout branch, which renders the latest store
-// data on the next tick. The counter is global (it mirrors React's global nested-update counter) and resets
-// after any idle gap. It is advanced on every update() of an opted-in Cx -- counting only the synchronous
-// branch would let the window reset whenever a deferred update lands between two synchronous ones, so the
-// counter would never reach the limit. performance.now() gives sub-ms resolution (Date.now() is the fallback;
-// Timing.now() can't be used here because it returns 0 in production).
-const SYNC_UPDATE_BURST_LIMIT = 30;
-const SYNC_UPDATE_BURST_RESET_MS = 10;
-const syncUpdateBurstNow =
-	typeof performance !== "undefined" && performance.now ? () => performance.now() : () => Date.now();
-let syncUpdateBurstCount = 0;
-let syncUpdateBurstLastAt = 0;
-function trackSyncUpdateBurst() {
-	let t = syncUpdateBurstNow();
-	if (t - syncUpdateBurstLastAt > SYNC_UPDATE_BURST_RESET_MS) syncUpdateBurstCount = 0;
-	syncUpdateBurstLastAt = t;
-	return ++syncUpdateBurstCount > SYNC_UPDATE_BURST_LIMIT;
-}
 class Cx extends VDOM.Component {
 	widget;
 	store;
@@ -2131,6 +2107,8 @@ class Cx extends VDOM.Component {
 	deferCounter;
 	pendingUpdateTimer;
 	unsubscribeIdleRequest;
+	// 0 when no synchronous setState is in flight; >0 while one is pending (re-entrancy guard for update())
+	stateUpdateDepth = 0;
 	constructor(props) {
 		super(props);
 		if (props.instance) {
@@ -2151,11 +2129,12 @@ 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 = {};
 		this.renderCount = 0;
 		if (props.onError) this.componentDidCatch = this.componentDidCatchHandler.bind(this);
@@ -2187,7 +2166,7 @@ class Cx extends VDOM.Component {
 			return this.instance;
 		}
 		if (this.widget && this.parentInstance)
-			return (this.instance = this.parentInstance.getDetachedChild(this.widget, 0, this.store));
+			return (this.instance = this.parentInstance.getDetachedChild(this.widget, "0", this.store));
 		throw new Error("Could not resolve a widget instance in the Cx component.");
 	}
 	render() {
@@ -2216,35 +2195,63 @@ class Cx extends VDOM.Component {
 		let data = this.store.getData();
 		debug(appDataFlag, data);
 		if (this.flags.preparing) this.flags.dirty = true;
-		// `immediate` always renders synchronously (its contract). Otherwise, while batching, a Cx that opts in
-		// via `limitSyncBursts` defers once a synchronous burst gets too deep (avoids React's max-update-depth).
-		// Without the flag the condition is unchanged -- trackSyncUpdateBurst() is never even called, so the
-		// guard has zero effect on instances that don't opt in.
-		else if (this.props.immediate || (isBatchingUpdates() && !(this.props.limitSyncBursts && trackSyncUpdateBurst()))) {
-			notifyBatchedUpdateStarting();
-			this.setState(
-				{
-					data: data,
-				},
-				notifyBatchedUpdateCompleted,
-			);
-		} else {
-			//in standard mode sequential store commands are batched -- as is any update that exceeds the
-			//synchronous burst limit above, which falls through here to avoid React's max-update-depth abort
-			if (!this.pendingUpdateTimer) {
+		// Synchronous path (while batching, or for `immediate` instances). At most one setState may be in flight
+		// per Cx: if one is already pending (stateUpdateDepth != 0) skip issuing another. Re-entrant setStates
+		// nested deep -- e.g. a large initial render that writes to the store while it renders -- are what trip
+		// React's "Maximum update depth exceeded"; coalescing them into a single in-flight update avoids that.
+		// The pending update's completion callback re-reads the store and renders again if it changed
+		// (see onStateUpdateCompleted), so no change is dropped.
+		else if (this.props.immediate || isBatchingUpdates()) {
+			if (this.stateUpdateDepth == 0) {
+				this.stateUpdateDepth = 1;
 				notifyBatchedUpdateStarting();
-				this.pendingUpdateTimer = setTimeout(() => {
-					delete this.pendingUpdateTimer;
-					//for opted-in instances read fresh data at fire time so a deferred (coalesced) update isn't
-					//left stale after a burst; otherwise keep the original captured-data behavior unchanged
-					this.setState(
-						{
-							data: this.props.limitSyncBursts ? this.store.getData() : data,
-						},
-						notifyBatchedUpdateCompleted,
-					);
-				}, 0);
+				this.setState(
+					{
+						data: data,
+					},
+					this.onStateUpdateCompleted,
+				);
 			}
+		} else {
+			// standard mode: coalesce sequential store commands into a single deferred update
+			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
+	// rendering -- i.e. the render itself wrote to the store, as happens throughout a large initial render --
+	// render once more with the latest data, keeping this callback armed; otherwise the burst has settled, so
+	// clear the in-flight flag and report completion. Re-arming coalesces until the store reaches a fixpoint;
+	// 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;
+		} else {
+			this.stateUpdateDepth++;
+			if (this.stateUpdateDepth < 20 && isBatchingUpdates())
+				this.setState(
+					{
+						data: latestData,
+					},
+					this.onStateUpdateCompleted,
+				);
+			else this.scheduleStateUpdate();
 		}
 	}
 	waitForIdle() {
@@ -2253,9 +2260,12 @@ class Cx extends VDOM.Component {
 		let token = ++this.deferCounter;
 		this.unsubscribeIdleRequest = onIdleCallback(
 			() => {
-				this.setState({
-					deferToken: token,
-				});
+				this.setState(
+					{
+						deferToken: token,
+					},
+					this.onStateUpdateCompleted,
+				);
 			},
 			{
 				timeout: this.props.idleTimeout || 30000,
@@ -2693,7 +2703,6 @@ class Restate extends PureContainerBase {
 				deferredUntilIdle: instance.data.deferredUntilIdle,
 				idleTimeout: instance.data.idleTimeout,
 				immediate: this.immediate,
-				limitSyncBursts: this.limitSyncBursts,
 				cultureInfo: instance.cultureInfo,
 			},
 			key,
@@ -2703,7 +2712,6 @@ class Restate extends PureContainerBase {
 Restate.prototype.detached = false;
 Restate.prototype.waitForIdle = false;
 Restate.prototype.immediate = false;
-Restate.prototype.limitSyncBursts = false;
 Restate.prototype.culture = null;
 const PrivateStore = Restate;
 class RestateStore extends Store {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx",
-  "version": "26.7.1",
+  "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": {