Split NodeRenderer into NodeRenderer and NodeComponentWrapper

packages/react/src/container/NodeRenderer/index.tsx

@@ -76,19 +76,74 @@ const NodeRenderer = (props: NodeRendererProps) => {
   return (
     <div className="react-flow__nodes" style={containerStyle}>
       {nodes.map((node) => {
+        return (
+          <NodeComponentWrapper
+            key={node.id}
+            id={node.id}
+            nodeTypes={props.nodeTypes}
+            nodeExtent={props.nodeExtent}
+            nodeOrigin={props.nodeOrigin}
+            onNodeClick={props.onNodeClick}
+            onNodeMouseEnter={props.onNodeMouseEnter}
+            onNodeMouseMove={props.onNodeMouseMove}
+            onNodeMouseLeave={props.onNodeMouseLeave}
+            onNodeContextMenu={props.onNodeContextMenu}
+            onNodeDoubleClick={props.onNodeDoubleClick}
+            noDragClassName={props.noDragClassName}
+            noPanClassName={props.noPanClassName}
+            rfId={props.rfId}
+            disableKeyboardA11y={props.disableKeyboardA11y}
+            resizeObserver={resizeObserver}
+            nodesDraggable={nodesDraggable}
+            nodesConnectable={nodesConnectable}
+            nodesFocusable={nodesFocusable}
+            elementsSelectable={elementsSelectable}
+            onError={onError}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+const NodeComponentWrapper = memo(function NodeComponentWrapper(props: {
+  id: string;
+  nodeExtent: NodeRendererProps['nodeExtent'];
+  nodeTypes: NodeRendererProps['nodeTypes'];
+  nodeOrigin: NodeRendererProps['nodeOrigin'];
+  onNodeClick: NodeRendererProps['onNodeClick'];
+  onNodeMouseEnter: NodeRendererProps['onNodeMouseEnter'];
+  onNodeMouseMove: NodeRendererProps['onNodeMouseMove'];
+  onNodeMouseLeave: NodeRendererProps['onNodeMouseLeave'];
+  onNodeContextMenu: NodeRendererProps['onNodeContextMenu'];
+  onNodeDoubleClick: NodeRendererProps['onNodeDoubleClick'];
+  noDragClassName: NodeRendererProps['noDragClassName'];
+  noPanClassName: NodeRendererProps['noPanClassName'];
+  rfId: NodeRendererProps['rfId'];
+  disableKeyboardA11y: NodeRendererProps['disableKeyboardA11y'];
+  resizeObserver: ResizeObserver | null;
+  nodesDraggable: boolean;
+  nodesConnectable: boolean;
+  nodesFocusable: boolean;
+  elementsSelectable: boolean;
+  onError: ReactFlowState['onError'];
+}) {
+  const node = useStore((s) => s.nodeLookup.get(props.id));
+  if (!node) return null;
+
   let nodeType = node.type || 'default';
 
   if (!props.nodeTypes[nodeType]) {
-          onError?.('003', errorMessages['error003'](nodeType));
+    props.onError?.('003', errorMessages['error003'](nodeType));
 
     nodeType = 'default';
   }
 
   const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
-        const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
+  const isDraggable = !!(node.draggable || (props.nodesDraggable && typeof node.draggable === 'undefined'));
-        const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
+  const isSelectable = !!(node.selectable || (props.elementsSelectable && typeof node.selectable === 'undefined'));
-        const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
+  const isConnectable = !!(node.connectable || (props.nodesConnectable && typeof node.connectable === 'undefined'));
-        const isFocusable = !!(node.focusable || (nodesFocusable && typeof node.focusable === 'undefined'));
+  const isFocusable = !!(node.focusable || (props.nodesFocusable && typeof node.focusable === 'undefined'));
 
   const clampedPosition = props.nodeExtent
     ? clampPosition(node.computed?.positionAbsolute, props.nodeExtent)
@@ -134,7 +189,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
       isSelectable={isSelectable}
       isConnectable={isConnectable}
       isFocusable={isFocusable}
-            resizeObserver={resizeObserver}
+      resizeObserver={props.resizeObserver}
       dragHandle={node.dragHandle}
       zIndex={node[internalsSymbol]?.z ?? 0}
       isParent={!!node[internalsSymbol]?.isParent}
@@ -146,10 +201,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
       ariaLabel={node.ariaLabel}
     />
   );
-      })}
+});
-    </div>
-  );
-};
 
 NodeRenderer.displayName = 'NodeRenderer';