From b071b17dd62284f0a19bf8fc19a0419b5c3751d2 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 28 Aug 2025 14:48:53 +0200
Subject: [PATCH] Fix: created vs archived rendering errors; memoize options
 (#10562)

Fixes the rendering / max update depth exceeded errors we were seeing in
the console for this chart by memoizing the options.

<img width="1710" height="1420" alt="image"
src="https://github.com/user-attachments/assets/9a24d4e5-b563-4a3c-9a76-915e0a5fda24"
/>

Now the chart doesn't throw any errors anymore.
---
 .../CreationArchiveChart.tsx                  | 97 ++++++++++---------
 1 file changed, 51 insertions(+), 46 deletions(-)

diff --git a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
index 36f7b801b5..94b16e320e 100644
--- a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
+++ b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
@@ -134,57 +134,62 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
     const data =
         notEnoughData || isLoading ? placeholderData : aggregateOrProjectData;
 
+    const options = useMemo(
+        () => ({
+            responsive: true,
+            interaction: {
+                mode: 'index' as const,
+                intersect: false,
+            },
+            plugins: {
+                legend: {
+                    position: 'bottom' as const,
+                    labels: {
+                        color: theme.palette.text.secondary,
+                        usePointStyle: true,
+                        padding: 21,
+                        boxHeight: 8,
+                    },
+                },
+                tooltip: {
+                    enabled: false,
+                    position: 'average' as const,
+                    external: createTooltip(setTooltip),
+                },
+            },
+            locale: locationSettings.locale,
+            scales: {
+                x: {
+                    type: 'time' as const,
+                    display: true,
+                    time: {
+                        unit: 'week' as const,
+                        tooltipFormat: 'PPP',
+                    },
+                    grid: {
+                        display: false,
+                    },
+                },
+                y: {
+                    type: 'linear' as const,
+                    position: 'left' as const,
+                    beginAtZero: true,
+                    title: {
+                        display: true,
+                        text: 'Number of flags',
+                    },
+                },
+            },
+        }),
+        [theme, locationSettings, setTooltip],
+    );
+
     return (
         <>
             <Chart
                 type='bar'
                 data={data}
-                options={{
-                    responsive: true,
-                    interaction: {
-                        mode: 'index',
-                        intersect: false,
-                    },
-                    plugins: {
-                        legend: {
-                            position: 'bottom' as const,
-                            labels: {
-                                color: theme.palette.text.secondary,
-                                usePointStyle: true,
-                                padding: 21,
-                                boxHeight: 8,
-                            },
-                        },
-                        tooltip: {
-                            enabled: false,
-                            position: 'average',
-                            external: createTooltip(setTooltip),
-                        },
-                    },
-                    locale: locationSettings.locale,
-                    scales: {
-                        x: {
-                            type: 'time',
-                            display: true,
-                            time: {
-                                unit: 'week',
-                                tooltipFormat: 'PPP',
-                            },
-                            grid: {
-                                display: false,
-                            },
-                        },
-                        y: {
-                            type: 'linear',
-                            position: 'left',
-                            beginAtZero: true,
-                            title: {
-                                display: true,
-                                text: 'Number of flags',
-                            },
-                        },
-                    },
-                }}
+                options={options}
                 height={100}
                 width={250}
             />