feat(context): drop componentName param from context consumer hooks - #3267
Merged
Conversation
The `componentName` argument existed only to interpolate a name into a
console.warn fired when a hook was called outside its provider. React DevTools
attributes those calls far better, and the diagnostic was largely inert already:
of the 7 hooks that accepted it, 3 ignored it outright and useTranslationContext
could never reach its warn branch (its context carries a real default). Many of
the 138 call sites passed the wrong name — hook names, or stale component names —
and 5 passed `Component.name`, which a minifier mangles.
Removes the parameter from all 7 hooks and their 138 call sites, and normalizes
missing-provider behaviour behind a shared `requireContext` helper:
- Required contexts throw, naming the hook and the provider. This replaces
`return {} as T`, a typed lie that deferred failure to an opaque
"cannot read properties of undefined" several frames later.
- Contexts with a meaningful default keep it and gain an honest type:
useTranslationContext, useComponentContext, useChannelInstanceContext
(now Partial), useModalContext, useAriaLiveAnnouncer,
useMessageTranslationViewContext.
- Components that legitimately render both inside and outside a provider read
the raw context instead (Audio, VoiceRecording, CardAudio, Timestamp,
MessageRepliesCountButton, MessageComposerUI, ModalGallery).
Two supporting changes were needed so their hooks could throw:
- WithDragAndDropUpload probed the `{}` fallback via
`Object.keys(ctx).length > 0`; it now uses a
`useIsWithinMessageComposerContext()` predicate. Adds the test file this
component previously lacked, covering both upload modes.
- GalleryHeader read the message context while rendering outside any
MessageProvider. GalleryItem now carries `user` and `createdAt`, so channel
media shows a correct per-item sender and timestamp — which it previously
could not display at all. Adds a `timestamp.GalleryTimestamp` key.
ChatViewContext loses its module-level LayoutController default, which silently
shared one instance across unrelated subtrees.
Contract pinned by src/context/__tests__/missingProviderContract.test.tsx.
State current behaviour rather than what changed, and drop the reasoning narration a reviewer has no context for. Also replaces the stale `fixme` in useDialogManager, which the missing-manager guard now handles.
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
oliverlaz
had a problem deploying
to
Vite Example Public (Preview)
August 17, 2026 08:20 — with 
GitHub Actions
Error
GitHub Actions
Error
oliverlaz
had a problem deploying
to
Vite Example Development (Preview)
August 17, 2026 08:20 — with
GitHub Actions
Failure
GitHub Actions
Failure
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## release-v15 #3267 +/- ##
==============================================
Coverage ? 84.28%
==============================================
Files ? 526
Lines ? 15942
Branches ? 5115
==============================================
Hits ? 13436
Misses ? 2506
Partials ? 0 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
MartinCupela
approved these changes
Aug 17, 2026
oliverlaz
added a commit
that referenced
this pull request
Aug 17, 2026
…#3268) ### Goal [REACT-1027](https://linear.app/stream/issue/REACT-1027/remove-the-deprecated-message-component-override-from-componentcontext) `ComponentContext.Message` was deprecated in favour of `MessageUI` during v14 but never removed. Removing it surfaced four more ways to reach the same component — a `Message` prop on `Message`, `MessageList`, `VirtualizedMessageList` and `Thread` — now all collapsed onto the `MessageUI` slot. BREAKING CHANGES: - **`ComponentContext.Message` removed** → use the `MessageUI` slot. - **The `Message` prop is removed from `Message`, `MessageList`, `VirtualizedMessageList` and `Thread`**, and therefore from `additionalMessageListProps`, `additionalVirtualizedMessageListProps` and `additionalParentMessageProps`. To replace a per-component prop, scope the slot to that subtree: ```tsx // before <Thread Message={CustomThreadMessage} /> // after <WithComponents overrides={{ MessageUI: CustomThreadMessage }}> <Thread /> </WithComponents> ``` - **`areMessagePropsEqual` no longer compares the message UI component** — it comes from context, and context updates re-render consumers regardless of `React.memo`. `VirtualMessage` is unchanged and still wins inside `VirtualizedMessageList`, but now only within that list. Full migration detail: `ai-docs/ai-migration-v14-v15.md`. ### Implementation details `MessageProps.Message` was the transport `VirtualizedMessageList` and `Thread` used to inject their resolved component, so deleting it naively would have silently broken the `VirtualMessage` slot. Instead, `VirtualizedMessageList` applies `VirtualMessage` to its own subtree's `ComponentContext` — wrapping only when the slot is set — which also retires `VirtuosoContext.Message`. `Thread`'s three-step resolution collapses entirely; context already carries the component. `WithComponents` now memoizes its merged override map: required, not cosmetic, since an unmemoized provider on the list's render path would defeat per-message memoization. `VirtualMessage` had no test coverage, which is what made this risky. Added three tests — precedence, subtree scoping, unset fallback — and the precedence one fails on `release-v15`. They assert what `useComponentContext()` resolves to rather than inspecting rendered items, because Virtuoso renders zero items under jsdom and an item-level assertion would pass either way. Verified: `tsc -p tsconfig.lib.json --noEmit` clean · `yarn test` 231 files, 2828 passed / 1 skipped · `yarn lint-fix` clean. Each documented failure mode was compiled to confirm it errors (`TS2322` for props, `TS2561` for override keys). **Unrelated change:** the v14 → v15 guide also gains a section on the context-hook `componentName` removal from #3267, included at the author's request rather than split out. ### UI Changes None — override plumbing only; the default message UI and every existing `MessageUI` / `VirtualMessage` override render exactly as before.
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
2 participants
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.
🎯 Goal
REACT-1026
Context hooks accepted a
componentNameargument used only to name a component in aconsole.warnwhen the hook was called outside its provider. React DevTools does that better, and the diagnostic was mostly inert: of the 7 hooks accepting it, 3 ignored it anduseTranslationContextcould never reach its warn branch. Meanwhile it was threaded through 138 call sites and often wrong — 11 passed a hook name, several were stale, and 5 passedComponent.name, which minifies away.BREAKING CHANGE:
componentNameargument.useChatContext('X')and friends stop type-checking; drop the argument.{}. Affects the 14 hooks listed above. Components must be rendered within the provider they read from — e.g. anything callinguseChatContextneeds a<Chat>ancestor.useChannelInstanceContextreturnsPartial<ChannelInstanceContextValue>—channelis now typed as possiblyundefined.ChatViewContexthas no default value (typed| undefined), souseContext(ChatViewContext)may returnundefined.MessageComposerContextis typed asMessageComposerContextValue | undefined, correcting a narrower declaration that was papered over with casts.ComponentContext.MessageTimestampoverride; it renders the item's own timestamp.🛠 Implementation details
Parameter removed from all 7 hooks and their 138 call sites.
Missing-provider behaviour also normalized, since
src/had three competing conventions (warn +{} as T, throw, silent cast). The{} as Tfallback deferred failures to a downstreamCannot read properties of undefinedseveral frames away. Everything now goes throughrequireContext(src/context/requireContext.ts):useChatContext,useMessageContext,useMessageComposerContext,useMessageListContext,useVirtualizedMessageListContext,useMessageBounceContext,usePollContext,useDialogManager,useSearchContext,useSearchSourceResultsContext,useContextMenuContext,useChannelListItemContext,useGalleryContext,useChatViewContextuseTranslationContext,useComponentContext,useChannelInstanceContext(nowPartial),useModalContext,useAriaLiveAnnouncer,useMessageTranslationViewContextAudio,VoiceRecording,CardAudio,Timestamp,MessageRepliesCountButton,MessageComposerUI,ModalGalleryTwo changes were needed before their hooks could throw:
WithDragAndDropUploaddetected the composer viaObject.keys(ctx).length > 0; now uses auseIsWithinMessageComposerContext()predicate. Adds the test file this component lacked.GalleryHeaderread message context while rendering outside anyMessageProvider.GalleryItemnow carriesuserandcreatedAt— wrapping the call sites would be wrong, sinceChannelMediaViewflattens many messages into one list. Adds atimestamp.GalleryTimestampkey.ChatViewContextalso loses its module-levelLayoutControllerdefault, which let unrelated subtrees write to one shared instance.src/context/__tests__/missingProviderContract.test.tsxpins the required/optional split.🎨 UI Changes
The channel-media gallery header now shows a per-item sender and timestamp, which it previously couldn't display at all.
No screenshots: the demo users on the shared environment have no channels, and seeding one would write test data others would see. Covered by unit tests in
GalleryUI.test.tsx— worth a manual look.