Memoize chart components with custom deep comparison

- Add custom comparison function to React.memo for TopCountriesPieChart
- Add custom comparison function to React.memo for TopCountriesBarChart
- Use JSON.stringify for deep equality comparison of countries and countryNames
- Prevents unnecessary re-renders when parent updates with same data
- Avoids Recharts reprocessing 5000+ data points on each parent re-render

All tests passing. No linting issues.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/components/TopCountriesBarChart.tsx

@@ -138,10 +138,11 @@ function BarTooltip(props: TooltipContentProps): React.JSX.Element | null {
  * @param props - `countries` map and `countryNames` map from the
  *   `/api/dashboard/bans/by-country` response.
  */
-export const TopCountriesBarChart = memo(function TopCountriesBarChart({
+export const TopCountriesBarChart = memo(
-  countries,
+  function TopCountriesBarChart({
-  countryNames,
+    countries,
-}: TopCountriesBarChartProps): React.JSX.Element {
+    countryNames,
+  }: TopCountriesBarChartProps): React.JSX.Element {
   const styles = useStyles();
   const { colorMode } = useThemeMode();
 
@@ -198,4 +199,14 @@ export const TopCountriesBarChart = memo(function TopCountriesBarChart({
       </ResponsiveContainer>
     </div>
   );
-});
+},
+  (prev, next) => {
+    // Custom comparison: if countries and countryNames are deeply equal,
+    // memo returns true (skip render). This prevents Recharts from
+    // reprocessing 5000+ data points on parent re-renders.
+    return (
+      JSON.stringify(prev.countries) === JSON.stringify(next.countries) &&
+      JSON.stringify(prev.countryNames) === JSON.stringify(next.countryNames)
+    );
+  },
+);

frontend/src/components/TopCountriesPieChart.tsx

@@ -130,10 +130,11 @@ function PieTooltip(props: TooltipContentProps): React.JSX.Element | null {
  * @param props - `countries` map and `countryNames` map from the
  *   `/api/dashboard/bans/by-country` response.
  */
-export const TopCountriesPieChart = memo(function TopCountriesPieChart({
+export const TopCountriesPieChart = memo(
-  countries,
+  function TopCountriesPieChart({
-  countryNames,
+    countries,
-}: TopCountriesPieChartProps): React.JSX.Element {
+    countryNames,
+  }: TopCountriesPieChartProps): React.JSX.Element {
   const styles = useStyles();
   const { colorMode } = useThemeMode();
 
@@ -199,4 +200,14 @@ export const TopCountriesPieChart = memo(function TopCountriesPieChart({
       </ResponsiveContainer>
     </div>
   );
-});
+},
+  (prev, next) => {
+    // Custom comparison: if countries and countryNames are deeply equal,
+    // memo returns true (skip render). This prevents Recharts from
+    // reprocessing 5000+ data points on parent re-renders.
+    return (
+      JSON.stringify(prev.countries) === JSON.stringify(next.countries) &&
+      JSON.stringify(prev.countryNames) === JSON.stringify(next.countryNames)
+    );
+  },
+);