Memoize Fluent chart token resolution

2026-04-20 19:47:10 +02:00
parent 20412dd94b
commit 27369b43d6
9 changed files with 140 additions and 18 deletions
--- a/frontend/src/components/TopCountriesPieChart.tsx
+++ b/frontend/src/components/TopCountriesPieChart.tsx
@@ -3,6 +3,7 @@
 * an "Other" slice aggregating all remaining countries.
 */

+import { useMemo } from "react";
 import {
  Cell,
  Legend,
@@ -134,7 +135,10 @@ export function TopCountriesPieChart({
 }: TopCountriesPieChartProps): React.JSX.Element {
  const styles = useStyles();

-  const resolvedPalette = CHART_PALETTE.map(resolveFluentToken);
+  const resolvedPalette = useMemo(
+    () => CHART_PALETTE.map(resolveFluentToken),
+    [],
+  );
  const slices = buildSlices(countries, countryNames, resolvedPalette);
  const total = slices.reduce((sum, s) => sum + s.value, 0);