LegendIcon: only render color picker when the props change (#33141)

packages/grafana-ui/src/components/VizLegend/VizLegendSeriesIcon.tsx

@@ -8,25 +8,29 @@ interface Props {
   onColorChange: (color: string) => void;
 }
 
-/**
+export const VizLegendSeriesIcon = React.memo<Props>(
- * @internal
+  ({ disabled, color, onColorChange }) => {
- */
+    return disabled ? (
-export const VizLegendSeriesIcon: React.FunctionComponent<Props> = ({ disabled, color, onColorChange }) => {
+      <SeriesIcon color={color} />
-  return disabled ? (
+    ) : (
-    <SeriesIcon color={color} />
+      <SeriesColorPicker color={color} onChange={onColorChange} enableNamedColors>
-  ) : (
+        {({ ref, showColorPicker, hideColorPicker }) => (
-    <SeriesColorPicker color={color} onChange={onColorChange} enableNamedColors>
+          <SeriesIcon
-      {({ ref, showColorPicker, hideColorPicker }) => (
+            color={color}
-        <SeriesIcon
+            className="pointer"
-          color={color}
+            ref={ref}
-          className="pointer"
+            onClick={showColorPicker}
-          ref={ref}
+            onMouseLeave={hideColorPicker}
-          onClick={showColorPicker}
+          />
-          onMouseLeave={hideColorPicker}
+        )}
-        />
+      </SeriesColorPicker>
-      )}
+    );
-    </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';