Opening Agent Settings dialog causes 500-600ms render delay

[RajuGangitla]

I am trying to contribute to Inkeep (mainly performance improvements)
and started by measuring the Agent component using React Scan.

When opening the Agent Settings dialog it is taking around 500-800ms.

Root cause:
Whenever the dialog opens, it causes the entire Agent component to
re-render including the ReactFlow canvas.

What I tried:
I tried to separate the AgentSidePanel from the AgentFlowPanel into
their own components, but realized there are shared states (isOpen,
nodeId, edgeId, isCopilotStreaming, canEdit) between them which makes
a clean separation difficult.

I am keeping this open and continuing to look for better optimizations.
Would appreciate any thoughts from the team on the best approach here.

agent-settings.webm

[pullfrog]

  ^{｜ Build this ➔ ｜ Make a plan ➔ ｜ pullfrog.com}

[dimaMachina]

I think most of performance issues can be fixed by enabling react compiler for all files, wdyt?

currently we are partially using it with 'use memo' comment directives at the top of component definitions

[RajuGangitla]

i tried using use memo in all components in the Agent Page. I didn't see any performance improvement

and also whenever i open agent settings or any side pane in the toolbar the tooltips in sidebar still rendering (i tried to debug and seperated the tooltip providers for both sidebar and Agent component but it didnt workout)

[JiwaniZakir]

The 500–800ms delay is consistent with the ReactFlow canvas doing a full re-render on every dialog open, likely because isOpen (and the other shared state) lives in the same component that owns the <ReactFlow> tree, so any state change triggers the entire subtree. A common fix here is to lift the dialog state into a separate context or Zustand/Jotai slice so the ReactFlow canvas can be wrapped in React.memo and bail out of re-renders when only dialog-related state changes. The shared values (nodeId, edgeId, isCopilotStreaming, canEdit) could also be split into separate atoms or context slices so consumers only re-render when the slice they care about changes. Worth checking whether the AgentFlowPanel is currently subscribed to any of those dialog-specific values at all — if not, memoizing it with a stable props contract should be sufficient.

[dimaMachina]

@RajuGangitla try now, lmk if it was improved for you