perf(chat): wrap MessageInput with React.memo to skip re-renders during streaming#611
Open
HUQIANTAO wants to merge 1 commit into
Open
perf(chat): wrap MessageInput with React.memo to skip re-renders during streaming#611HUQIANTAO wants to merge 1 commit into
HUQIANTAO wants to merge 1 commit into
Conversation
MessageInput is a 1133-line component with 24 props, 10+ hooks, and 8 child components (SlashCommandPopover, CliToolsPopover, ModelSelectorDropdown, EffortSelectorDropdown, QuickActions). It was not wrapped in React.memo, so every ~100ms streaming text chunk caused ChatView to re-render, which re-ran MessageInput's entire function body including all its internal hooks. All of MessageInput's props are already stable during streaming: - Callbacks are wrapped in useCallback at the call site (ChatView) - Primitive props (sessionId, modelName, providerId, isStreaming) are stable or change only at stream start/end - blockingReasonIds is wrapped in useMemo - sdkInitMeta is a ref value Between stream start and end, ALL props are reference-stable. With React.memo, the shallow prop comparison lets React skip the entire 1133-line re-render on every text chunk — only the streaming UI (MessageList items) needs to re-render in response to new text.
|
Someone is attempting to deploy a commit to the op7418's projects Team on Vercel. A member of the Team first needs to authorize it. |
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
1 participant
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.
MessageInput is a 1133-line component with 24 props, 10+ hooks, and 8 child components. It was not wrapped in React.memo, so every ~100ms streaming text chunk caused the entire function body to re-run. All props are already reference-stable during streaming (callbacks are useCallback'd, primitives don't change, arrays are useMemo'd). With React.memo, the shallow prop comparison skips the re-render — only the MessageList items need to re-render in response to new text.