Move React hooks out of component modules#7942
Open
joshblack wants to merge 2 commits into
Open
Conversation
|
github-actions
Bot
added
staff
Contributor
|
joshblack
changed the title
joshblack
added
skip changeset
Contributor
There was a problem hiding this comment.
Pull request overview
Refactors Primer React exports to satisfy React Refresh “component-only exports” expectations by moving hook implementations (and shared experimental Tabs state/types) out of component modules while preserving the public root exports.
Changes:
- Added standalone theme hook/context modules (
useTheme.ts,ThemeContext.ts) and updated ThemeProvider consumers to import hooks from the new module. - Extracted experimental Tabs hook logic/context/types into dedicated modules and adjusted
experimental/Tabsexports accordingly. - Extracted
useConfirmintoConfirmationDialog/useConfirm.tsand updated imports/exports, tests, and stories.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/useTheme.ts | New module exporting useTheme/useColorSchemeVar hooks separate from ThemeProvider. |
| packages/react/src/ThemeProvider.tsx | Uses extracted ThemeContext + useTheme from new module; stops exporting hooks. |
| packages/react/src/ThemeContext.ts | New shared ThemeProvider context module. |
| packages/react/src/stories/ThemeProvider.stories.tsx | Updates story imports to use the new useTheme module. |
| packages/react/src/index.ts | Re-exports theme hooks from useTheme and useConfirm from its new module. |
| packages/react/src/experimental/Tabs/useTabs.ts | New internal hook for accessing Tabs context. |
| packages/react/src/experimental/Tabs/useTabPanel.ts | New extracted useTabPanel hook module. |
| packages/react/src/experimental/Tabs/useTabList.ts | New extracted useTabList hook module. |
| packages/react/src/experimental/Tabs/useTab.ts | New extracted useTab hook module. |
| packages/react/src/experimental/Tabs/types.ts | New shared types for Tabs component + hooks. |
| packages/react/src/experimental/Tabs/TabsContext.ts | New Tabs context module. |
| packages/react/src/experimental/Tabs/Tabs.tsx | Keeps components in module; imports hooks/context/types from new modules. |
| packages/react/src/experimental/Tabs/Tabs.examples.stories.tsx | Updates imports to use extracted Tabs hooks. |
| packages/react/src/experimental/Tabs/index.ts | Re-exports Tabs component and hooks/types from their new modules. |
| packages/react/src/ConfirmationDialog/useConfirm.ts | New extracted useConfirm hook module. |
| packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx | Removes hook implementation; leaves component-only exports. |
| packages/react/src/ConfirmationDialog/ConfirmationDialog.test.tsx | Updates test imports to use extracted useConfirm. |
| packages/react/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx | Updates story imports to use extracted useConfirm. |
| packages/react/src/tests/ThemeProvider.test.tsx | Updates test imports to use new useTheme module. |
Copilot's findings
- Files reviewed: 19/19 changed files
- Comments generated: 2
Comment on lines
+87
to
+90
| export type TabListHookProps<T extends HTMLElement> = TabListProps & { | ||
| /** Optional ref to use for the tablist. If none is provided, one will be generated automatically */ | ||
| ref?: React.RefObject<T> | ||
| } |
Comment on lines
+9
to
+12
|
|
||
| const onKeyDown = (event: React.KeyboardEvent) => { | ||
| const {current: tablist} = ref | ||
| if (tablist === null) { |
jonrohan
approved these changes
Jun 8, 2026
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
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.
Closes #
No linked issue.
Moves exported React hooks and shared Tabs state out of component implementation files so component modules can satisfy React Refresh component-only exports.
Changelog
New
ConfirmationDialog/useConfirm.ts.ThemeContext.tsanduseTheme.tsfor Primer React theme state access.Changed
useTab,useTabList, anduseTabPanelmodules.Removed
Rollout strategy
Testing & Reviewing
Review that hook modules follow
use{Name}.tsnaming and that Tabs component behavior is unchanged.Merge checklist