perf(ActionList): enable React Compiler#7537
Conversation
- Remove ActionList from the React Compiler unsupported list - Fix Rules of Hooks violation in ChildWithSideEffects story by moving SideEffectDescription to module scope
🦋 Changeset detectedLatest commit: 7bb57e1 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 |
|
👋 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 |
There was a problem hiding this comment.
Pull request overview
This PR enables React Compiler for ActionList components — a foundational component used by ActionMenu, SelectPanel, NavList, and FilteredActionList. The compiler will automatically optimize re-renders without manual memoization, improving performance for one of the most-rendered list components in the design system.
Changes:
- Removed ActionList from the React Compiler unsupported list
- Fixed a Rules of Hooks violation by moving a nested component to module scope in a story file
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/react/src/ActionList/ActionList.features.stories.tsx | Moved SideEffectDescription component from nested definition to module scope to comply with Rules of Hooks |
| packages/react/script/react-compiler.mjs | Removed src/ActionList/**/*.tsx from the unsupported components list |
| .changeset/actionlist-react-compiler.md | Added changeset documenting the performance improvement |
|
👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/13846 |
Closes #
Enable React Compiler for ActionList, the foundational component used by ActionMenu, SelectPanel, NavList, and FilteredActionList.
ActionList was originally excluded from the compiler during the initial migration. After analysis (build, lint with
eslint-plugin-react-compiler, and manual Storybook verification), all ActionList source files are fully compiler-compatible. The only fix needed was a Rules of Hooks violation in a story file (ChildWithSideEffects, movedSideEffectDescriptionto module scope).With the compiler enabled, React will automatically memoize ActionList's components (
Item,List,Group,Selection,Visuals, etc.), reducing unnecessary re-renders without manualReact.memo/useMemo/useCallback.Changelog
New
N/A
Changed
src/ActionList/**/*.tsxfrom the React Compiler unsupported list inreact-compiler.mjsChildWithSideEffectsstoryRemoved
N/A
Rollout strategy
Testing & Reviewing
npx eslintwithreact-compiler/react-compilerrule on all ActionList files (source, stories, tests): 0 warningsnpx turbo build --filter=@primer/react --forcepasses with ActionList compiledMerge checklist