Performance

package.json

@@ -13,7 +13,8 @@
   },
   "dependencies": {
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-window": "^2.2.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

src/components/app/app.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useCo2Data } from '../../hooks/useCo2Data';
 import { LoadingSpinner } from '../loading-spinner/loading-spinner';
 import { SearchBar } from '../search-bar/search-bar';
@@ -32,36 +32,54 @@ export const App = () => {
     isColumnModalOpen: false,
   });
 
-  const years = data ? getAvailableYears(data) : [];
-  const availableColumns = getAvailableColumns();
-
-  const handleSearch = (value: string) => {
-    setState({ ...state, searchQuery: value });
-  };
-
-  const handleYearChange = (year: number) => {
-    setState({ ...state, selectedYear: year });
-  };
-
-  const handleSortFieldChange = (field: 'name' | 'population') => {
-    setState({ ...state, sortField: field });
-  };
-
-  const handleSortOrderToggle = () => {
-    setState({
-      ...state,
-      sortOrder: state.sortOrder === 'asc' ? 'desc' : 'asc',
-    });
-  };
-
-  const handleColumnToggle = (column: string) => {
-    setState({
-      ...state,
-      selectedColumns: state.selectedColumns.includes(column)
-        ? state.selectedColumns.filter((c) => c !== column)
-        : [...state.selectedColumns, column],
-    });
-  };
+const years = useMemo(() => {
+  return data ? getAvailableYears(data) : [];
+}, [data]);
+
+
+const availableColumns = useMemo(() => {
+  return getAvailableColumns();
+}, []);
+
+  const handleSearch = useCallback((value: string) => {
+  setState(prev => ({
+    ...prev,
+    searchQuery: value,
+  }));
+}, []);
+
+const handleYearChange = useCallback((year: number) => {
+  setState(prev => ({
+    ...prev,
+    selectedYear: year,
+  }));
+}, []);
+
+const handleSortFieldChange = useCallback(
+  (field: 'name' | 'population') => {
+    setState(prev => ({
+      ...prev,
+      sortField: field,
+    }));
+  },
+  []
+);
+
+ const handleSortOrderToggle = useCallback(() => {
+  setState(prev => ({
+    ...prev,
+    sortOrder: prev.sortOrder === 'asc' ? 'desc' : 'asc',
+  }));
+}, []);
+
+const handleColumnToggle = useCallback((column: string) => {
+  setState(prev => ({
+    ...prev,
+    selectedColumns: prev.selectedColumns.includes(column)
+      ? prev.selectedColumns.filter(c => c !== column)
+      : [...prev.selectedColumns, column],
+  }));
+}, []);
 
   const handleModalToggle = () => {
     setState({ ...state, isColumnModalOpen: !state.isColumnModalOpen });

src/components/country-card/country-card.tsx

@@ -1,30 +1,49 @@
-import type { Country } from '../../types';
-import { DataTable } from '../data-table/data-table';
-import {
-  getPopulationForYear,
-  getCo2ForYear,
-  createYearDataMap,
-} from '../../utils/data-transformers';
-import { formatNumber } from '../../utils/format-utils';
-
-import styles from './country-card.module.css';
-
-type CountryCardProps = {
-  country: Country;
-  selectedYear: number;
-  selectedColumns: string[];
-};
-
-export const CountryCard = ({ country, selectedYear, selectedColumns }: CountryCardProps) => {
-  const yearDataMap = createYearDataMap(country.data);
-  const population = getPopulationForYear(yearDataMap, selectedYear);
-  const co2 = getCo2ForYear(yearDataMap, selectedYear);
+import React, { useMemo } from "react";
+import { formatNumber } from "../../utils/format-utils";
+import styles from "./country-card.module.css";
+import { createYearDataMap, getCo2ForYear, getPopulationForYear } from "../../utils/data-transformers";
+import { DataTable } from "../data-table/data-table";
+import type { Country } from "../../types";
+
+// Component	Status
+// CountryList	✅ useMemo + sort
+// CountryCard	✅ useMemo + memo
+// DataTable	🔜 add memo + ke
+
+
+// CountryList ⭐⭐⭐⭐⭐
+// CountryCard ⭐⭐⭐⭐⭐
+// DataTable ⭐⭐⭐⭐
+// Parent handlers ⭐⭐⭐
+// Virtualization ⭐⭐⭐⭐ (bonus)
+
+
+type CountryCardProps = { country: Country; selectedYear: number; selectedColumns: string[] };
+
+export const CountryCard = React.memo(function CountryCard({
+  country,
+  selectedYear,
+  selectedColumns,
+}: CountryCardProps) {
+  const yearDataMap = useMemo(() => {
+    return createYearDataMap(country.data);
+  }, [country.data]);
+
+  const population = useMemo(() => {
+    return getPopulationForYear(yearDataMap, selectedYear);
+  }, [yearDataMap, selectedYear]);
+
+  const co2 = useMemo(() => {
+    return getCo2ForYear(yearDataMap, selectedYear);
+  }, [yearDataMap, selectedYear]);
 
   return (
     <div className={styles.card}>
       <div className={styles.header}>
         <h3 className={styles.title}>{country.id}</h3>
-        {country.iso_code && <span className={styles.isoCode}>{country.iso_code}</span>}
+        {country.iso_code && (
+          <span className={styles.isoCode}>{country.iso_code}</span>
+        )}
       </div>
 
       <div className={styles.stats}>
@@ -36,7 +55,11 @@ export const CountryCard = ({ country, selectedYear, selectedColumns }: CountryC
         </div>
       </div>
 
-      <DataTable data={country.data} year={selectedYear} columns={selectedColumns} />
+      <DataTable
+        data={country.data}
+        year={selectedYear}
+        columns={selectedColumns}
+      />
     </div>
   );
-};
+});