perf(ActionList): enable React Compiler #7537
Draft
+12
−13
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
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.Changes
src/ActionList/**/*.tsxfrom the React Compiler unsupported list inreact-compiler.mjsChildWithSideEffectsstory — movedSideEffectDescriptionto module scope to comply with the Rules of HooksWhy this matters
ActionList is the most-rendered list component in the design system. With the compiler enabled, React will automatically memoize ActionList's components (
Item,List,Group,Selection,Visuals, etc.), reducing unnecessary re-renders without any manualReact.memo/useMemo/useCallbackwork.How did you test this change?
Lint — Ran
npx eslintwithreact-compiler/react-compilerrule on all ActionList files (source, stories, tests): 0 warningsBuild —
npx turbo build --filter=@primer/react --forcepasses cleanly with ActionList compiledStorybook — Verified the following stories render correctly with zero console warnings: