Skip to content

perf(Text): remove unnecessary useRef and useImperativeHandle hooks - #7551

Merged
hectahertz merged 7 commits into
mainfrom
hectahertz/perf-text-remove-unnecessary-hooks
Feb 20, 2026
Merged

perf(Text): remove unnecessary useRef and useImperativeHandle hooks#7551
hectahertz merged 7 commits into
mainfrom
hectahertz/perf-text-remove-unnecessary-hooks

Conversation

@hectahertz

@hectahertzhectahertz commented Feb 15, 2026

Copy link
Copy Markdown
Contributor

Closes #

Text had useRef + useRefObjectAsForwardedRef (wrapping useImperativeHandle) just to forward a ref that was never read internally. Removed both hooks and passed the forwarded ref directly to the element.

BeforeAfter
useRef10
useImperativeHandle (via useRefObjectAsForwardedRef)10
Total hooks per render20

Text is one of the most frequently rendered Primer components. On a typical page with 50-100 Text instances, this eliminates ✨ 100-200 hook calls per render cycle ✨.

Changelog

New

N/A

Changed

  • Text now passes the forwarded ref directly to the element instead of through useRef + useImperativeHandle

Removed

N/A

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

  1. Render <Text ref={myRef}>Hello</Text> and verify myRef.current points to the DOM span
  2. Verify polymorphic as prop still works: <Text as="p" ref={myRef}>Hello</Text>
  3. Verify size and weight props still apply data attributes

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Added/updated previews (Storybook)
  • Changes are SSR compatible
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge
  • (GitHub staff only) Integration tests pass at github/github

@changeset-bot

changeset-botBot commented Feb 15, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 2f71900

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

This PR includes changesets to release 1 package
NameType
@primer/reactPatch

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-actionsgithub-actionsBot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Feb 15, 2026
@github-actions

Copy link
Copy Markdown
Contributor

👋 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. Or, apply the integration-tests: skipped manually label to skip these checks.

CopilotAI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR optimizes the Text component in @primer/react by removing internal ref plumbing (useRef + useImperativeHandle) and forwarding the received ref directly to the rendered element, reducing per-render hook usage for a frequently-rendered component.

Changes:

  • Remove useRef/useRefObjectAsForwardedRef from Text and attach the forwarded ref directly to the polymorphic element.
  • Add a patch changeset documenting the performance-focused change.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

FileDescription
packages/react/src/Text/Text.tsxRemoves internal ref hooks and forwards ref directly to the rendered element.
.changeset/text-remove-hooks.mdPatch changeset entry describing the perf change.
Comments suppressed due to low confidence (1)

packages/react/src/Text/Text.tsx:22

  • Ref-forwarding behavior changed (ref now passed directly to the rendered element), but the existing Text unit tests don’t assert ref behavior. Add a test that renders (and ideally as well) and verifies ref.current points at the underlying DOM element to prevent regressions.
 <Component className={clsx(className, classes.Text)} data-size={size} data-weight={weight} {...rest} ref={ref} />

Comment threadpackages/react/src/Text/Text.tsx
@primer-integration

Copy link
Copy Markdown

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/14134

@primer-integration

Copy link
Copy Markdown

Integration test results from github/github-ui:

Passed CI  Passed
Waiting VRT   Waiting
Passed Projects  Passed

@hectahertz
hectahertz added this pull request to the merge queueFeb 20, 2026
Merged via the queue into main with commit 2fbfc49Feb 20, 2026
54 of 55 checks passed
@hectahertz
hectahertz deleted the hectahertz/perf-text-remove-unnecessary-hooks branch February 20, 2026 14:41
@primerprimerBot mentioned this pull request Feb 20, 2026
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommendedThis change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@hectahertz@TylerJDev