Checkbox: replace useLayoutEffect with ref callback for indeterminate#7765
Draft
Checkbox: replace useLayoutEffect with ref callback for indeterminate#7765
Conversation
Replace useLayoutEffect + useEffect with a ref callback pattern using useMergedRefs to set the indeterminate DOM property. This eliminates layout effects from every Checkbox render while maintaining the same synchronous timing guarantees. - Use useCallback ref to set .indeterminate on the DOM node - Merge forwarded ref with indeterminate callback via useMergedRefs - Replace imperative aria-checked useEffect with inline JSX attribute - Update tests to reflect that non-indeterminate checkboxes rely on native checked state for accessibility Closes #7764 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
🦋 Changeset detectedLatest commit: b13ac8a The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
Contributor
|
github-actions
bot
added
the
integration-tests: recommended
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces
useLayoutEffectanduseEffectin theCheckboxcomponent with a ref callback pattern, eliminating layout effects from every Checkbox render.Changes
useLayoutEffect→ ref callback: UsesuseCallback+useMergedRefsto set.indeterminateon the DOM node synchronously during commit (same timing guarantees, no registered effect)useEffect→ inline JSX: Replaces the imperativearia-checkedeffect with a declarativearia-checked={indeterminate ? 'mixed' : undefined}attribute. Non-indeterminate checkboxes rely on native checked state for accessibility.useEffect,useLayoutEffect,useProvidedRefOrCreateMotivation
Layout effects run synchronously after DOM mutations and block painting. While individually cheap, they add up in pages rendering many checkboxes (e.g., list views with bulk selection). This change removes one layout effect and one regular effect per Checkbox instance.
Testing
aria-checkedtest to reflect that non-indeterminate checkboxes use native checked stateCloses #7764