From af46bbf65469f19732bc7abf0bd6366a8d66b024 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Tue, 20 Apr 2021 11:28:47 -0700
Subject: [PATCH] LegendIcon: only render color picker when the props change
 (#33141)

---
 .../VizLegend/VizLegendSeriesIcon.tsx         | 44 ++++++++++---------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendSeriesIcon.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendSeriesIcon.tsx
index fb0316341e3..22c098105ef 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendSeriesIcon.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendSeriesIcon.tsx
@@ -8,25 +8,29 @@ interface Props {
   onColorChange: (color: string) => void;
 }
 
-/**
- * @internal
- */
-export const VizLegendSeriesIcon: React.FunctionComponent<Props> = ({ disabled, color, onColorChange }) => {
-  return disabled ? (
-    <SeriesIcon color={color} />
-  ) : (
-    <SeriesColorPicker color={color} onChange={onColorChange} enableNamedColors>
-      {({ ref, showColorPicker, hideColorPicker }) => (
-        <SeriesIcon
-          color={color}
-          className="pointer"
-          ref={ref}
-          onClick={showColorPicker}
-          onMouseLeave={hideColorPicker}
-        />
-      )}
-    </SeriesColorPicker>
-  );
-};
+export const VizLegendSeriesIcon = React.memo<Props>(
+  ({ disabled, color, onColorChange }) => {
+    return disabled ? (
+      <SeriesIcon color={color} />
+    ) : (
+      <SeriesColorPicker color={color} onChange={onColorChange} enableNamedColors>
+        {({ ref, showColorPicker, hideColorPicker }) => (
+          <SeriesIcon
+            color={color}
+            className="pointer"
+            ref={ref}
+            onClick={showColorPicker}
+            onMouseLeave={hideColorPicker}
+          />
+        )}
+      </SeriesColorPicker>
+    );
+  },
+  // areEqual -- return true if they are the same.
+  // onColorChange updates frequently, so ignore that
+  (prevProps, nextProps) => {
+    return prevProps.color === nextProps.color && prevProps.disabled === nextProps.disabled;
+  }
+);
 
 VizLegendSeriesIcon.displayName = 'VizLegendSeriesIcon';