diff --git a/src/additional-components/Controls/index.tsx b/src/additional-components/Controls/index.tsx
index d1c78370..f2d14162 100644
--- a/src/additional-components/Controls/index.tsx
+++ b/src/additional-components/Controls/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import cc from 'classcat';
 
 import { useStoreState, useStoreActions } from '../../store/hooks';
@@ -17,46 +17,48 @@ interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
   showInteractive?: boolean;
 }
 
-const Controls = ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
-  const setInteractive = useStoreActions((actions) => actions.setInteractive);
-  const fitView = useStoreActions((actions) => actions.fitView);
-  const zoomIn = useStoreActions((actions) => actions.zoomIn);
-  const zoomOut = useStoreActions((actions) => actions.zoomOut);
+const Controls = memo(
+  ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
+    const setInteractive = useStoreActions((actions) => actions.setInteractive);
+    const fitView = useStoreActions((actions) => actions.fitView);
+    const zoomIn = useStoreActions((actions) => actions.zoomIn);
+    const zoomOut = useStoreActions((actions) => actions.zoomOut);
 
-  const isInteractive = useStoreState((s) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable);
-  const mapClasses = cc(['react-flow__controls', className]);
+    const isInteractive = useStoreState((s) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable);
+    const mapClasses = cc(['react-flow__controls', className]);
 
-  return (
-    <div className={mapClasses} style={style}>
-      {showZoom && (
-        <>
-          <div className="react-flow__controls-button react-flow__controls-zoomin" onClick={() => zoomIn()}>
-            <PlusIcon />
+    return (
+      <div className={mapClasses} style={style}>
+        {showZoom && (
+          <>
+            <div className="react-flow__controls-button react-flow__controls-zoomin" onClick={() => zoomIn()}>
+              <PlusIcon />
+            </div>
+            <div className="react-flow__controls-button react-flow__controls-zoomout" onClick={() => zoomOut()}>
+              <MinusIcon />
+            </div>
+          </>
+        )}
+        {showFitView && (
+          <div
+            className="react-flow__controls-button react-flow__controls-fitview"
+            onClick={() => fitView({ padding: 0.1 })}
+          >
+            <FitviewIcon />
           </div>
-          <div className="react-flow__controls-button react-flow__controls-zoomout" onClick={() => zoomOut()}>
-            <MinusIcon />
+        )}
+        {showInteractive && (
+          <div
+            className="react-flow__controls-button react-flow__controls-interactive"
+            onClick={() => setInteractive(!isInteractive)}
+          >
+            {isInteractive ? <UnlockIcon /> : <LockIcon />}
           </div>
-        </>
-      )}
-      {showFitView && (
-        <div
-          className="react-flow__controls-button react-flow__controls-fitview"
-          onClick={() => fitView({ padding: 0.1 })}
-        >
-          <FitviewIcon />
-        </div>
-      )}
-      {showInteractive && (
-        <div
-          className="react-flow__controls-button react-flow__controls-interactive"
-          onClick={() => setInteractive(!isInteractive)}
-        >
-          {isInteractive ? <UnlockIcon /> : <LockIcon />}
-        </div>
-      )}
-    </div>
-  );
-};
+        )}
+      </div>
+    );
+  }
+);
 
 Controls.displayName = 'Controls';