React: Performance

PERFORMANCE.md

@@ -0,0 +1,63 @@
+# Performance Report
+
+## Before Optimization
+
+### 1. Toggle columns
+- Commit duration:  19.8ms
+- Render duration: 961.9ms
+- Screenshot: ![Toggle columns](./src/screenshots/screenshots_toggleing_columns.png)
+
+### 2. Searching
+- Commit duration:  15.8ms
+- Render duration: 486.3ms
+- Screenshot: ![Searching](./src/screenshots/screenshots_searching_country.png)
+
+### 3. Select year
+- Commit duration:  5.7ms
+- Render duration: 559.3ms
+- Screenshot: ![Select year](./src/screenshots/screenshot_select_year.png)
+
+### 4. Sorting
+- Commit duration:  5.4ms
+- Render duration: 462.7ms
+- Screenshot: ![Sorting](./src/screenshots/screenshot_sortyng_by.png)
+
+## After optimization
+
+### 1. Toggle columns
+- Commit duration:  5.1ms
+- Render duration: 29.4ms
+- Screenshot: ![Toggle columns](./src/screenshots/Toggleing_columns_after_perf.png)
+
+### 2. Searching
+- Commit duration:  4.7ms
+- Render duration: 87ms
+- Screenshot: ![Searching](./src/screenshots/Searching_after_perf.png)
+
+### 3. Select year
+- Commit duration:  8ms
+- Render duration: 34.3ms
+- Screenshot: ![Select year](./src/screenshots/Select_year_after_pref.png)
+
+### 4. Sorting
+- Commit duration:  4.6ms
+- Render duration: 94.8ms
+- Screenshot: ![Sorting](./src/screenshots/Sortyng_by_after_perf.png)
+
+
+## Comparison
+
+| Action | Before | After | Improvement |
+|---|---|---|---|
+| Toggle columns | 961.9ms | 29.4ms | ~97% |
+| Searching | 486.3ms | 87ms | ~82% |
+| Select year | 559.3ms | 34.3ms | ~94% |
+| Sorting | 462.7ms | 94.8ms | ~80% |
+
+## Applied optimizations
+
+- `useMemo` — memoized filtered/sorted country list and computed values in CountryCard
+- `useCallback` — memoized event handlers in App
+- `React.memo` — prevented unnecessary re-renders of CountryCard
+- Proper `key` props — used `country.id` instead of index
+- Virtualization — rendered only visible rows with `react-window`

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, useState } from 'react';
 import { useCo2Data } from '../../hooks/useCo2Data';
 import { LoadingSpinner } from '../loading-spinner/loading-spinner';
 import { SearchBar } from '../search-bar/search-bar';
@@ -35,37 +35,37 @@ export const App = () => {
   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 handleModalToggle = () => {
-    setState({ ...state, isColumnModalOpen: !state.isColumnModalOpen });
-  };
+  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 = useCallback(() => {
+    setState(prev=> ({ ...prev, isColumnModalOpen: !prev.isColumnModalOpen }));
+  }, []);
 
   if (isLoading) {
     return <LoadingSpinner />;

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

@@ -8,17 +8,23 @@ import {
 import { formatNumber } from '../../utils/format-utils';
 
 import styles from './country-card.module.css';
+import { useMemo, memo } from 'react';
 
 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);
+export const CountryCard = 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}>
@@ -39,4 +45,4 @@ export const CountryCard = ({ country, selectedYear, selectedColumns }: CountryC
       <DataTable data={country.data} year={selectedYear} columns={selectedColumns} />
     </div>
   );
-};
+});