Browse Source

fix(perf): guard ArrayNode height check and fix variable shadowing

- Add early return in setNodes when height unchanged to prevent unnecessary updates
- Rename shadowed 'selected' variable to 'currentSelection' in validation useEffect
- Reduces redundant React Flow re-renders when array items don't change height
handoff-20260429-1057
shrimbly 5 months ago
parent
commit
7cb42aa0aa
  1. 12
      src/components/nodes/ArrayNode.tsx

12
src/components/nodes/ArrayNode.tsx

@ -150,8 +150,8 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
// Reset selection if it no longer points to a valid parsed item.
useEffect(() => {
const selected = nodeData.selectedOutputIndex;
if (selected !== null && (selected < 0 || selected >= previewItems.length)) {
const currentSelection = nodeData.selectedOutputIndex;
if (currentSelection !== null && (currentSelection < 0 || currentSelection >= previewItems.length)) {
updateNodeData(id, { selectedOutputIndex: null });
}
}, [id, nodeData.selectedOutputIndex, previewItems.length, updateNodeData]);
@ -163,9 +163,11 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
const newHeight = Math.max(baseHeight, 270 + previewItems.length * perItemHeight);
setNodes((nodes) =>
nodes.map((node) =>
node.id === id ? { ...node, style: { ...node.style, height: newHeight } } : node
)
nodes.map((node) => {
if (node.id !== id) return node;
if ((node.style?.height as number) === newHeight) return node;
return { ...node, style: { ...node.style, height: newHeight } };
})
);
}, [id, previewItems.length, setNodes]);

Loading…
Cancel
Save