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,7 +138,8 @@ 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(
+  function TopCountriesBarChart({
     countries,
     countryNames,
   }: TopCountriesBarChartProps): React.JSX.Element {
@@ -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,7 +130,8 @@ 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(
+  function TopCountriesPieChart({
     countries,
     countryNames,
   }: TopCountriesPieChartProps): React.JSX.Element {
@@ -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)
+    );
+  },
+);