diff --git a/src/additional-components/MiniMap/MiniMapNode.tsx b/src/additional-components/MiniMap/MiniMapNode.tsx
index 24b1eee0..a1986e92 100644
--- a/src/additional-components/MiniMap/MiniMapNode.tsx
+++ b/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';
 
diff --git a/src/additional-components/MiniMap/index.tsx b/src/additional-components/MiniMap/index.tsx
index 50d2ae0e..ea4a3cb5 100644
--- a/src/additional-components/MiniMap/index.tsx
+++ b/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,65 +19,76 @@ interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
 const defaultWidth = 200;
 const defaultHeight = 150;
 
-const MiniMap = ({
-  style = { backgroundColor: '#f8f8f8' },
-  className,
-  nodeColor = '#ddd',
-  nodeBorderRadius = 5,
-  maskColor = 'rgba(10, 10, 10, .25)',
-}: MiniMapProps) => {
-  const containerWidth = useStoreState((s) => s.width);
-  const containerHeight = useStoreState((s) => s.height);
-  const [tX, tY, tScale] = useStoreState((s) => s.transform);
-  const nodes = useStoreState((s) => s.nodes);
+const MiniMap = memo(
+  ({
+    style = { backgroundColor: '#f8f8f8' },
+    className,
+    nodeColor = '#ddd',
+    nodeBorderRadius = 5,
+    maskColor = 'rgba(10, 10, 10, .25)',
+  }: MiniMapProps) => {
+    const containerWidth = useStoreState((s) => s.width);
+    const containerHeight = useStoreState((s) => s.height);
+    const [tX, tY, tScale] = useStoreState((s) => s.transform);
+    const nodes = useStoreState((s) => s.nodes);
 
-  const mapClasses = cc(['react-flow__minimap', className]);
-  const elementWidth = (style.width || defaultWidth)! as number;
-  const elementHeight = (style.height || defaultHeight)! as number;
-  const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
-  const hasNodes = nodes && nodes.length;
-  const bb = getRectOfNodes(nodes);
-  const viewBB: Rect = {
-    x: -tX / tScale,
-    y: -tY / tScale,
-    width: containerWidth / tScale,
-    height: containerHeight / tScale,
-  };
-  const boundingRect = hasNodes ? getBoundsofRects(bb, viewBB) : viewBB;
-  const scaledWidth = boundingRect.width / elementWidth;
-  const scaledHeight = boundingRect.height / elementHeight;
-  const viewScale = Math.max(scaledWidth, scaledHeight);
-  const viewWidth = viewScale * elementWidth;
-  const viewHeight = viewScale * elementHeight;
-  const offset = 5 * viewScale;
-  const x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
-  const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
-  const width = viewWidth + offset * 2;
-  const height = viewHeight + offset * 2;
+    const mapClasses = cc(['react-flow__minimap', className]);
+    const elementWidth = (style.width || defaultWidth)! as number;
+    const elementHeight = (style.height || defaultHeight)! as number;
+    const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
+    const hasNodes = nodes && nodes.length;
+    const bb = getRectOfNodes(nodes);
+    const viewBB: Rect = {
+      x: -tX / tScale,
+      y: -tY / tScale,
+      width: containerWidth / tScale,
+      height: containerHeight / tScale,
+    };
+    const boundingRect = hasNodes ? getBoundsofRects(bb, viewBB) : viewBB;
+    const scaledWidth = boundingRect.width / elementWidth;
+    const scaledHeight = boundingRect.height / elementHeight;
+    const viewScale = Math.max(scaledWidth, scaledHeight);
+    const viewWidth = viewScale * elementWidth;
+    const viewHeight = viewScale * elementHeight;
+    const offset = 5 * viewScale;
+    const x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
+    const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
+    const width = viewWidth + offset * 2;
+    const height = viewHeight + offset * 2;
 
-  return (
-    <svg
-      width={elementWidth}
-      height={elementHeight}
-      viewBox={`${x} ${y} ${width} ${height}`}
-      style={style}
-      className={mapClasses}
-    >
-      {nodes
-        .filter((node) => !node.isHidden)
-        .map((node) => (
-          <MiniMapNode key={node.id} node={node} color={nodeColorFunc(node)} borderRadius={nodeBorderRadius} />
-        ))}
-      <path
-        className="react-flow__minimap-mask"
-        d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
+    return (
+      <svg
+        width={elementWidth}
+        height={elementHeight}
+        viewBox={`${x} ${y} ${width} ${height}`}
+        style={style}
+        className={mapClasses}
+      >
+        {nodes
+          .filter((node) => !node.isHidden)
+          .map((node) => (
+            <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"
+          d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
         M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
-        fill={maskColor}
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};
+          fill={maskColor}
+          fillRule="evenodd"
+        />
+      </svg>
+    );
+  }
+);
 
 MiniMap.displayName = 'MiniMap';