perf: optimize agent stream view rendering

- Separate streaming item from FlatList data array to prevent full
  re-diffs on every streaming chunk
- Memoize renderStreamItem with useCallback
- Memoize AgentThoughtMessage component with React.memo

The main fix is rendering the streaming message in ListHeaderComponent
instead of prepending it to the data array, which was causing the
entire list to re-diff on every character streamed.
This commit is contained in:
Mohamed Boudra
2026-01-09 18:00:34 +07:00
parent 1a2498e9e7
commit b90c17a919
2 changed files with 102 additions and 103 deletions
@@ -240,7 +240,8 @@ export function AgentStreamView({
setIsNearBottom(true); setIsNearBottom(true);
} }
function renderStreamItem({ item }: ListRenderItemInfo<StreamItem>) { const renderStreamItem = useCallback(
({ item }: ListRenderItemInfo<StreamItem>) => {
let content: React.ReactNode = null; let content: React.ReactNode = null;
switch (item.kind) { switch (item.kind) {
@@ -329,7 +330,9 @@ export function AgentStreamView({
} }
return <View style={stylesheet.streamItemWrapper}>{content}</View>; return <View style={stylesheet.streamItemWrapper}>{content}</View>;
} },
[handleInlinePathPress, agent.cwd]
);
const pendingPermissionItems = useMemo( const pendingPermissionItems = useMemo(
() => () =>
@@ -339,30 +342,20 @@ export function AgentStreamView({
[pendingPermissions, agentId] [pendingPermissions, agentId]
); );
const streamingItem = useMemo<StreamItem | null>(() => {
if (!streamingBuffer) {
return null;
}
return {
kind: "assistant_message",
id: streamingBuffer.id,
text: streamingBuffer.text,
timestamp: streamingBuffer.timestamp,
};
}, [streamingBuffer]);
const streamingItemId = streamingItem?.id ?? null;
const showWorkingIndicator = agent.status === "running"; const showWorkingIndicator = agent.status === "running";
const listHeaderComponent = useMemo(() => { const listHeaderComponent = useMemo(() => {
if (pendingPermissionItems.length === 0 && !showWorkingIndicator) { const hasPermissions = pendingPermissionItems.length > 0;
const hasStreaming = !!streamingBuffer;
if (!hasPermissions && !showWorkingIndicator && !hasStreaming) {
return null; return null;
} }
return ( return (
<View style={stylesheet.contentWrapper}> <View style={stylesheet.contentWrapper}>
<View style={stylesheet.listHeaderContent}> <View style={stylesheet.listHeaderContent}>
{pendingPermissionItems.length > 0 ? ( {hasPermissions ? (
<View style={stylesheet.permissionsContainer}> <View style={stylesheet.permissionsContainer}>
{pendingPermissionItems.map((permission) => ( {pendingPermissionItems.map((permission) => (
<PermissionRequestCard key={permission.key} permission={permission} ws={wsOrInert} /> <PermissionRequestCard key={permission.key} permission={permission} ws={wsOrInert} />
@@ -375,18 +368,24 @@ export function AgentStreamView({
<WorkingIndicator /> <WorkingIndicator />
</View> </View>
) : null} ) : null}
{hasStreaming ? (
<View style={stylesheet.streamItemWrapper}>
<AssistantMessage
message={streamingBuffer.text}
timestamp={streamingBuffer.timestamp.getTime()}
onInlinePathPress={handleInlinePathPress}
/>
</View>
) : null}
</View> </View>
</View> </View>
); );
}, [pendingPermissionItems, showWorkingIndicator, wsOrInert]); }, [pendingPermissionItems, showWorkingIndicator, wsOrInert, streamingBuffer, handleInlinePathPress]);
const flatListData = useMemo(() => { const flatListData = useMemo(() => {
const reversed = [...streamItems].reverse(); return [...streamItems].reverse();
if (streamingItem) { }, [streamItems]);
reversed.unshift(streamingItem);
}
return reversed;
}, [streamItems, streamingItem]);
const flatListExtraData = useMemo( const flatListExtraData = useMemo(
() => ({ () => ({
+2 -2
View File
@@ -963,7 +963,7 @@ const agentThoughtStylesheet = StyleSheet.create((theme) => ({
}, },
})); }));
export function AgentThoughtMessage({ message, status = "ready" }: AgentThoughtMessageProps) { export const AgentThoughtMessage = memo(function AgentThoughtMessage({ message, status = "ready" }: AgentThoughtMessageProps) {
const { theme } = useUnistyles(); const { theme } = useUnistyles();
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
const markdownContent = useMemo(() => message?.trim() ?? "", [message]); const markdownContent = useMemo(() => message?.trim() ?? "", [message]);
@@ -1102,7 +1102,7 @@ export function AgentThoughtMessage({ message, status = "ready" }: AgentThoughtM
isLoading={status !== "ready"} isLoading={status !== "ready"}
/> />
); );
} });
interface ToolCallProps { interface ToolCallProps {
toolName: string; toolName: string;