EPBDS-16211: fields that go on their own cost the form one pass

[AlexSamBY]

What

Stacked on #224, which adds useBracket: review and merge that one first.

Three more ways fields go when nothing mounts and no showIf flips. In each, every field that went validated every field left and told them all, as a closed popup's did before #223. The component that removes the fields now brackets them (useBracket), and the form tells every field once.

• An Expand that collapses. Its content goes when the collapse's animation ends, 500 ms after the click, from the Expand's own timer. EPBDS-16211: fields that mount or go later cost the form one pass in two more cases #223 left this out: my test waited 100 ms, saw the content still there, and its description said so wrongly.
  • The fix. Expand takes a bracket and opens it around its content mounting and going. The engine hands it the document form's brackets, as it hands ExpandList, which passes it to every Expand.
• Rows that collapse. Which rows of a table are expanded is TableView's own state: one row's toggle, or "expand all".
• Rows that go with the items. A host renders the document with fewer rows. Rows are keyed by their index, so rows go only when there are fewer.
  • The fix for both. TableView brackets a change of which rows are expanded, and of how many items it has. A page change needs nothing: the new page's rows mount, and their nodes bracket the old page's going.

On React 16 these fields still go one by one, as a popup's do there: it runs a removed component's effect cleanups during the commit, before any layout effect can open a bracket.

Measured

In jsdom: src/library/__tests__/later-mount-budget.test.js

Each case is beside 100 other required fields. Field states are counted through each field's isEqual, validators by their calls.

action	#224: states / validators	this branch
an Expand that holds a 50-row table of two fields per row collapses	60800 / 15150	600 / 100
a table's 50 expanded rows, one required field each, collapse	25302 / 6275	606 / 101
the host's data has 5 of the table's 50 rows	57450 / 14307	1755 / 333

• What stays the same. Opening the Expand costs 2011 / 201 either way, and expanding the rows 1459 / 151.
• React 18 and the host's data. React 18 computes the form's state once more, 2 field states for each field left: 57672 before, 1977 after. That happens with the bracket and without it, measured on 18.3.1 against 17.0.2 and 19.3.0.
• React 16 keeps what these cost before: the first column's numbers for the Expand and the rows, and 57201 / 14217 for the data.
• Without this branch's code, the three cases fail.

In Chromium

npm run test:perf --tarball on the packed #224 and on this branch: three interleaved rounds on an Apple M4, load average 2.9 to 4.2.

The rounds included three documents that the next PR commits. Each puts the 200-row table of the tabs document beside 200 required fields, shown by a showIf, in a popup, or in an Expand.

document / action	#224	this branch
an Expand that holds the table: collapsing it	535 (535 / 538 / 528)	124 (124 / 116 / 126)
the same Expand: expanding it	170 (176 / 170 / 166)	172 (172 / 173 / 172)
every other mount and action of the eight documents		within the rounds' spread

Milliseconds of main-thread time. Each cell is the median of three rounds' medians, with the rounds in parentheses.

What a collapse still costs is its animation. I measured five collapses on an unminified build of the branch. Of their 116 to 132 ms:

• 8 to 11 ms was script;
• 35 to 41 ms was layout, over 33 to 37 layouts: about one a frame, while the content's height animates for 500 ms;
• the protocol's metrics do not split the rest.

Tests

• later-mount-budget.test.js, three new cases: the table above.
• batchedForm.document.test.js, two new cases. An Expand that holds an empty required field collapses. A table's rows collapse, one of them with an empty required field. In both, the form's listeners hear that it is valid once the fields have gone.
• Expand.lifecycle.test.js, one new case. The bracket an Expand is given opens around its content mounting, and around its content going when the collapse's animation is over. On React 16, the content goes before it opens.

What this does not cover

• React 16, as above.
• Other views with rows from data. Their rows still go one by one when a host's data has fewer: a List is one. The table is the view that holds fields in rows in the examples.

Gates

All 22 gates and the manifest contract exit 0 on HEAD, on Node 24.14.0.

Tests.

• The suite has 2919 tests, 6 of them new. All pass on React 19.
• On React 18, 2918 pass, and EPBDS-16211: a bracket a Suspense boundary reopens no longer leaves validation paused #224's <Activity> case is skipped.
• On React 16.14 and 17, 2914 pass, and five are skipped, as on EPBDS-16211: a bracket a Suspense boundary reopens no longer leaves validation paused #224.
• Expand.tsx and TableView.tsx keep all their lines covered.
• In the browser, the demo's 62 tests pass in Chromium on React 18 and 19, and so do the packed tarball's on React 16.14 to 19.

🤖 Generated with Claude Code