refactor(minimap): use memo

src/additional-components/MiniMap/MiniMapNode.tsx

@@ -1,20 +1,17 @@
-import React from 'react';
-
-import { Node } from '../../types';
+import React, { memo, CSSProperties } from 'react';
 
 interface MiniMapNodeProps {
-  node: Node;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
   color: string;
   borderRadius: number;
+  style?: CSSProperties;
 }
 
-const MiniMapNode = ({ node, color, borderRadius }: MiniMapNodeProps) => {
-  const {
-    position: { x, y },
-    width,
-    height,
-  } = node.__rf;
-  const { background, backgroundColor } = node.style || {};
+const MiniMapNode = memo(({ x, y, width, height, style, color, borderRadius }: MiniMapNodeProps) => {
+  const { background, backgroundColor } = style || {};
   const fill = (color || background || backgroundColor) as string;
 
   return (
@@ -29,7 +26,7 @@ const MiniMapNode = ({ node, color, borderRadius }: MiniMapNodeProps) => {
       fill={fill}
     />
   );
-};
+});
 
 MiniMapNode.displayName = 'MiniMapNode';
 

src/additional-components/MiniMap/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import cc from 'classcat';
 
 import { useStoreState } from '../../store/hooks';
@@ -19,13 +19,14 @@ interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
 const defaultWidth = 200;
 const defaultHeight = 150;
 
-const MiniMap = ({
+const MiniMap = memo(
+  ({
     style = { backgroundColor: '#f8f8f8' },
     className,
     nodeColor = '#ddd',
     nodeBorderRadius = 5,
     maskColor = 'rgba(10, 10, 10, .25)',
-}: MiniMapProps) => {
+  }: MiniMapProps) => {
     const containerWidth = useStoreState((s) => s.width);
     const containerHeight = useStoreState((s) => s.height);
     const [tX, tY, tScale] = useStoreState((s) => s.transform);
@@ -66,7 +67,16 @@ const MiniMap = ({
         {nodes
           .filter((node) => !node.isHidden)
           .map((node) => (
-          <MiniMapNode key={node.id} node={node} color={nodeColorFunc(node)} borderRadius={nodeBorderRadius} />
+            <MiniMapNode
+              key={node.id}
+              x={node.__rf.position.x}
+              y={node.__rf.position.y}
+              width={node.__rf.width}
+              height={node.__rf.height}
+              style={node.style}
+              color={nodeColorFunc(node)}
+              borderRadius={nodeBorderRadius}
+            />
           ))}
         <path
           className="react-flow__minimap-mask"
@@ -77,7 +87,8 @@ const MiniMap = ({
         />
       </svg>
     );
-};
+  }
+);
 
 MiniMap.displayName = 'MiniMap';