's'

app/components/CityCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { memo, useState } from "react";
 import { City } from "../data/cities";
 
 function ratingToPercent(rating: string): number {
@@ -20,17 +20,14 @@ function getBarColor(p: number): string {
   return "#ef4444";
 }
 
-function ScoreBar({
-  icon,
-  label,
-  percent,
-  animate,
-}: {
+interface ScoreBarProps {
   icon: string;
   label: string;
   percent: number;
   animate: boolean;
-}) {
+}
+
+const ScoreBar = memo(function ScoreBar({ icon, label, percent, animate }: ScoreBarProps) {
   return (
     <div className="flex items-center gap-2 sm:gap-3">
       <span className="text-white/80 text-xs sm:text-sm w-14 sm:w-16 shrink-0 flex items-center gap-1">
@@ -48,17 +45,15 @@ function ScoreBar({
       </div>
     </div>
   );
-}
+});
 
-export default function CityCard({
-  city,
-  rank,
-  onClick,
-}: {
+interface CityCardProps {
   city: City;
   rank: number;
   onClick?: () => void;
-}) {
+}
+
+function CityCardComponent({ city, rank, onClick }: CityCardProps) {
   const [hovered, setHovered] = useState(false);
 
   const scores = [
@@ -194,3 +189,5 @@ export default function CityCard({
     </div>
   );
 }
+
+export default memo(CityCardComponent);