Checkbox: replace useLayoutEffect with ref callback for indeterminate prop

Open Beginner friendly
#7,764 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Refactor
Clarity
Clearly specified
Activity status
Quiet
Tech stack
react, typescript
Domain
frontend

Research direction

Start in packages/react/src/Checkbox/Checkbox.tsx by reading the current useLayoutEffect, useEffect, and forwarded ref handling. Replace the indeterminate effect with the proposed merged ref callback and express aria-checked inline. Done means indeterminate and mixed-state behavior remain correct without the separate effects.

Written by the indexing model from the issue text.

Description

Summary

The Checkbox component currently uses a useLayoutEffect to imperatively set the DOM .indeterminate property on the underlying <input> element. While this works, it can be replaced with a ref callback, which runs synchronously during commit (same timing guarantees as useLayoutEffect) without registering a separate effect.

Current behavior
useLayoutEffect(() => {
  if (checkboxRef.current) {
    checkboxRef.current.indeterminate = indeterminate || false
  }
}, [indeterminate, checked, checkboxRef])
Proposed change

Replace with a ref callback that sets .indeterminate inline:

const setIndeterminate = React.useCallback(
  (node: HTMLInputElement | null) => {
    if (node) {
      node.indeterminate = indeterminate || false
    }
  },
  [indeterminate, checked],
)

// merge with the forwarded ref
const mergedRef = useMergedRef(checkboxRef, setIndeterminate)
Additional cleanup

The useEffect that sets aria-checked can also be replaced with an inline JSX attribute:

'aria-checked': indeterminate ? 'mixed' : undefined

This avoids an unnecessary effect per Checkbox instance.

Motivation
  • Ref callbacks are the idiomatic React pattern for imperative DOM properties with no HTML attribute equivalent
  • Eliminates a layout effect per Checkbox render, reducing React commit phase work
  • Minor but measurable improvement in pages that render many checkboxes (e.g., list views with bulk selection)
References
Dominant language
TypeScript
Stars
3.9k
Forks
680
Avg merge
3d 13h
Merged PRs (30d)
56

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from primer/react

All issues in primer/react

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.