XYCanvas: useMemo() for className gen (#37513) (#37566)

(cherry picked from commit 27b94139ed)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

packages/grafana-ui/src/components/uPlot/geometries/XYCanvas.tsx

@@ -1,5 +1,5 @@
 import { usePlotContext } from '../context';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { css } from '@emotion/css';
 
 interface XYCanvasProps {}
@@ -16,16 +16,14 @@ export const XYCanvas: React.FC<XYCanvasProps> = ({ children }) => {
     return null;
   }
 
-  return (
-    <div
-      className={css`
-        position: absolute;
-        overflow: visible;
-        left: ${plotInstance.bbox.left / window.devicePixelRatio}px;
-        top: ${plotInstance.bbox.top / window.devicePixelRatio}px;
-      `}
-    >
-      {children}
-    </div>
-  );
+  const className = useMemo(() => {
+    return css`
+      position: absolute;
+      overflow: visible;
+      left: ${plotInstance.bbox.left / window.devicePixelRatio}px;
+      top: ${plotInstance.bbox.top / window.devicePixelRatio}px;
+    `;
+  }, [plotInstance.bbox.left, plotInstance.bbox.top]);
+
+  return <div className={className}>{children}</div>;
 };