Memoize Fluent chart token resolution

frontend/src/components/JailDistributionChart.tsx

@@ -6,6 +6,7 @@
  * empty states so the parent only needs to pass filter props.
  */
 
+import { useMemo } from "react";
 import {
   Bar,
   BarChart,
@@ -137,9 +138,14 @@ export function JailDistributionChart({
 
   const entries = buildEntries(jails);
   const chartHeight = Math.max(entries.length * BAR_HEIGHT_PX, MIN_CHART_HEIGHT);
-  const primaryColour = resolveFluentToken(CHART_PALETTE[0] ?? "");
-  const axisColour = resolveFluentToken(CHART_AXIS_TEXT_TOKEN);
-  const gridColour = resolveFluentToken(CHART_GRID_LINE_TOKEN);
+  const { primaryColour, axisColour, gridColour } = useMemo(
+    () => ({
+      primaryColour: resolveFluentToken(CHART_PALETTE[0] ?? ""),
+      axisColour: resolveFluentToken(CHART_AXIS_TEXT_TOKEN),
+      gridColour: resolveFluentToken(CHART_GRID_LINE_TOKEN),
+    }),
+    [],
+  );
 
   return (
     <ChartStateWrapper