fix: use useShallow for childAgents selector to prevent infinite loop
The childAgents selector in the agent screen was creating a new array on every render, causing an infinite loop when combined with zustand's store subscription. Added useShallow wrapper to perform shallow comparison and prevent unnecessary re-renders. Also updated plan.md with test results: - PARTIAL PASS: Fixed infinite loop, agent screen loads correctly - Sub-Agents menu section displays properly - Parent/child MCP creation works but parentAgentId not auto-injected - Added fix task for auto-injecting parentAgentId in MCP server 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.5
parent
cdc17006da
commit
99338d3b34
@@ -1,4 +1,5 @@
|
||||
import { useEffect, useMemo, useRef, useCallback, useState } from "react";
|
||||
import { useShallow } from "zustand/shallow";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
@@ -154,18 +155,21 @@ function AgentScreenContent({ serverId, agentId, onBack }: AgentScreenContentPro
|
||||
);
|
||||
|
||||
// Select child agents (agents where parentAgentId === current agentId)
|
||||
const childAgents = useSessionStore((state) => {
|
||||
if (!resolvedAgentId) return [];
|
||||
const agents = state.sessions[serverId]?.agents;
|
||||
if (!agents) return [];
|
||||
const children: Array<{ id: string; title: string | null }> = [];
|
||||
for (const [id, a] of agents) {
|
||||
if (a.parentAgentId === resolvedAgentId) {
|
||||
children.push({ id, title: a.title });
|
||||
// Use useShallow to avoid creating new array references on every render
|
||||
const childAgents = useSessionStore(
|
||||
useShallow((state) => {
|
||||
if (!resolvedAgentId) return [];
|
||||
const agents = state.sessions[serverId]?.agents;
|
||||
if (!agents) return [];
|
||||
const children: Array<{ id: string; title: string | null }> = [];
|
||||
for (const [id, a] of agents) {
|
||||
if (a.parentAgentId === resolvedAgentId) {
|
||||
children.push({ id, title: a.title });
|
||||
}
|
||||
}
|
||||
}
|
||||
return children;
|
||||
});
|
||||
return children;
|
||||
})
|
||||
);
|
||||
|
||||
// Select only the specific stream state - use stable empty array to avoid infinite loop
|
||||
const streamItemsRaw = useSessionStore((state) =>
|
||||
|
||||
Reference in New Issue
Block a user