Add React.memo to heavy dashboard components

frontend/src/components/TopCountriesPieChart.tsx

@@ -3,7 +3,7 @@
  * an "Other" slice aggregating all remaining countries.
  */
 
-import { useMemo } from "react";
+import { memo, useMemo } from "react";
 import {
   Cell,
   Legend,
@@ -129,7 +129,7 @@ function PieTooltip(props: TooltipContentProps): React.JSX.Element | null {
  * @param props - `countries` map and `countryNames` map from the
  *   `/api/dashboard/bans/by-country` response.
  */
-export function TopCountriesPieChart({
+export const TopCountriesPieChart = memo(function TopCountriesPieChart({
   countries,
   countryNames,
 }: TopCountriesPieChartProps): React.JSX.Element {
@@ -194,4 +194,4 @@ export function TopCountriesPieChart({
       </ResponsiveContainer>
     </div>
   );
-}
+});