Optimize high-scale React applications by eliminating unnecessary component re-renders.
⊞Code Example
import React, { useMemo, useCallback } from 'react';
export function AnalyticsDashboard({ rawData, onExport }) {
// Memoize expensive calculations
const totalRevenue = useMemo(() => {
return rawData.reduce((acc, curr) => acc + curr.amount, 0);
}, [rawData]);
// Memoize callback function reference
const handleExport = useCallback(() => {
onExport(totalRevenue);
}, [onExport, totalRevenue]);
return (
<div className="p-6 bg-slate-900 rounded-2xl text-white">
<h2 className="text-xl font-bold">Total Revenue: ${totalRevenue.toLocaleString()}</h2>
<button onClick={handleExport} className="mt-4 px-4 py-2 bg-emerald-500 rounded-xl font-bold">
Export CSV
</button>
</div>
);
}