perf(FormControl): derive validation message visibility during render by mattcosta7 · Pull Request #8023 · primer/react

mattcosta7 · 2026-06-22T14:05:05Z

Overview

ValidationAnimationContainer (used by FormControl to animate validation messages) tracked whether to render its children in state and synced it from an effect:

useEffect(()=>{if(show)setRender(true)},[show])

That's the set-state-in-effect / no-derived-state pattern, and it deferred the enter animation by one render. This adjusts the state during render instead, so the content mounts in the same commit:

const[shouldRender,setShouldRender]=useState(show)if(show&&!shouldRender)setShouldRender(true)// enter, in renderconstonAnimationEnd=()=>{if(!show)setShouldRender(false)}// exit unchanged

Behavior is identical (the exit animation still plays via onAnimationEnd), but there's no extra post-commit render, and removing the eslint-disable lets the lint rule guard against regressions.

Changelog

Changed

FormControl validation messages now render in the same commit instead of one render later (internal ValidationAnimationContainer refactor). No public API change.

Rollout strategy

Patch release
Minor release
Major release
None

Testing & Reviewing

Added a render-count regression test (via createRenderCounter) asserting show produces no extra update commit.
The FormControl suite passes unchanged.

Merge checklist

Replace the effect that set ValidationAnimationContainer's shouldRender with an adjust-during-render update, removing the extra post-commit render when the validation message appears. Adds a render-count regression test.

changeset-bot · 2026-06-22T14:05:13Z

🦋 Changeset detected

Latest commit: 0a85edd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-06-22T14:05:56Z

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. If this doesn't work, you can also use the original workflow here. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

primer · 2026-06-22T14:20:50Z

🤖 Lint issues have been automatically fixed and committed to this PR.

…verage check The new ValidationAnimationContainer render-count test triggers the classname-coverage check, but the internal animation wrapper does not forward a className prop, so implementsClassName does not apply. Add it to the ignore list.

Copilot

Pull request overview

This PR refactors the internal ValidationAnimationContainer used by FormControl-adjacent validation UI to avoid an effect-driven “derived state” update, aiming to mount validation content in the same commit when show becomes true.

Changes:

Refactored ValidationAnimationContainer to set shouldRender when show becomes true during render (removing the effect + eslint-disable).
Added a dedicated unit test suite, including a render-count regression assertion.
Added a patch changeset and updated the classname-test script ignore list for the new test file.

Show a summary per file

File	Description
`script/check-classname-tests.mjs`	Ignores the new internal component test from the “implementsClassName” enforcement script.
`packages/react/src/internal/components/ValidationAnimationContainer.tsx`	Removes effect-driven derived state and derives “enter” visibility during render.
`packages/react/src/internal/components/ValidationAnimationContainer.test.tsx`	Adds initial render/transition tests and a render-count regression test.
`.changeset/validation-animation-derive-in-render.md`	Adds a patch changeset entry for the behavior/perf improvement.

Copilot's findings

Files reviewed: 4/4 changed files
Comments generated: 4

…ion-derive-in-render

Copilot

Review details

Files reviewed: 3/3 changed files
Comments generated: 1
Review effort level: Low

…ldRender state

Drop the overlapping ToggleSwitch/SelectPanel/ValidationAnimationContainer changes (handled by #8024/#8025/#8023) and the comment-only edits to Autocomplete/Dialog/LabelGroup/TreeView/SelectPanel2. Retarget the changeset to the useMedia change only.

primer-integration · 2026-07-07T21:22:00Z

Integration test results from github/github-ui PR:

CI Passed
VRT Waiting
Projects Running

mattcosta7 · 2026-07-07T21:59:26Z

npm packages integration test for #8023 github/github-ui#25916

these all passed?

github-actionsBot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jun 22, 2026

mattcosta7 deployed to github-pages June 22, 2026 14:18 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-8023 June 22, 2026 14:21 Inactive

mattcosta7 deployed to github-pages June 22, 2026 15:45 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-8023 June 22, 2026 15:45 Inactive

mattcosta7 self-assigned this Jun 23, 2026

mattcosta7 marked this pull request as ready for review June 23, 2026 11:58

mattcosta7 requested a review from a team as a code owner June 23, 2026 11:58

mattcosta7 requested review from Copilot and siddharthkp June 23, 2026 11:58

Merge branch 'main' into fix/validation-animation-derive-in-render
bfa9772

Copilotstarted reviewing on behalf of mattcosta7 June 23, 2026 11:58 View session

CopilotAI reviewed Jun 23, 2026
View reviewed changes

mattcosta7 deployed to github-pages June 23, 2026 12:09 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-8023 June 23, 2026 12:10 Inactive

Copilotstarted work on behalf of mattcosta7 June 23, 2026 14:39 View session

Copilotfinished work on behalf of mattcosta7 June 23, 2026 14:44

joshblack approved these changes Jun 23, 2026
View reviewed changes

Forward props/className, tighten render test, terse changeset
1a50c22

mattcosta7 deployed to github-pages June 24, 2026 01:31 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-8023 June 24, 2026 01:32 Inactive

siddharthkp removed their request for review July 6, 2026 09:43

Merge remote-tracking branch 'origin/main' into fix/validation-animat…
f9879a7
…ion-derive-in-render

mattcosta7 deployed to github-pages July 7, 2026 15:30 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-8023 July 7, 2026 15:30 Inactive

mattcosta7 added the Canary Release Apply this label when you want CI to create a canary release of the current PR label Jul 7, 2026

Merge branch 'main' into fix/validation-animation-derive-in-render
6ba2bb3

mattcosta7 deployed to github-pages July 7, 2026 16:48 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-8023 July 7, 2026 16:49 Inactive

Merge branch 'main' into fix/validation-animation-derive-in-render
badc0a3

mattcosta7 deployed to github-pages July 7, 2026 17:18 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-8023 July 7, 2026 17:18 Inactive

mattcosta7 requested a review from Copilot July 7, 2026 18:41

Copilotstarted reviewing on behalf of mattcosta7 July 7, 2026 18:41 View session

CopilotAI reviewed Jul 7, 2026
View reviewed changes

Comment threadpackages/react/src/internal/components/ValidationAnimationContainer.tsx Outdated

Merge branch 'main' into fix/validation-animation-derive-in-render
73116ed

mattcosta7 deployed to github-pages July 7, 2026 19:38 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-8023 July 7, 2026 19:38 Inactive

fix(ValidationAnimationContainer): normalize show to boolean for shou…
fb12a1f
…ldRender state

mattcosta7 deployed to github-pages July 7, 2026 20:12 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-8023 July 7, 2026 20:12 Inactive

mattcosta7 mentioned this pull request Jul 7, 2026
perf(useMedia): read live matchMedia on first client render via useSyncExternalStore #8001
Merged
10 tasks

Merge branch 'main' into fix/validation-animation-derive-in-render
0a85edd

mattcosta7 deployed to github-pages July 7, 2026 20:36 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-8023 July 7, 2026 20:36 Inactive

mattcosta7 added this pull request to the merge queue Jul 7, 2026

Merged via the queue into main with commit 71fa75cJul 7, 2026
54 checks passed

mattcosta7 deleted the fix/validation-animation-derive-in-render branch July 7, 2026 22:07

primerBot mentioned this pull request Jul 7, 2026
Release tracking #8120
Merged

Navigation Menu

Uh oh!

perf(FormControl): derive validation message visibility during render - #8023

perf(FormControl): derive validation message visibility during render#8023
mattcosta7 merged 10 commits into
mainfrom
fix/validation-animation-derive-in-render

mattcosta7 commented Jun 22, 2026

Uh oh!

changeset-botBot commented Jun 22, 2026•
edited
Loading

Uh oh!

github-actionsBot commented Jun 22, 2026

Uh oh!

primerBot commented Jun 22, 2026

Uh oh!

CopilotAI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

CopilotAI left a comment

Uh oh!

Uh oh!

primer-integrationBot commented Jul 7, 2026•
edited
Loading

Uh oh!

mattcosta7 commented Jul 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

mattcosta7 commented Jun 22, 2026

Overview

Changelog

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-botBot commented Jun 22, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actionsBot commented Jun 22, 2026

⚠️ Action required

Uh oh!

primerBot commented Jun 22, 2026

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot's findings

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Review details

Uh oh!

Uh oh!

primer-integrationBot commented Jul 7, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mattcosta7 commented Jul 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-botBot commented Jun 22, 2026•
edited
Loading

primer-integrationBot commented Jul 7, 2026•
edited
Loading