[Performance] P2: Add useMemo for chart data transformations

[timfong888]

Rule Violated

Category: Re-render Optimization
Rule: rerender-memo
Impact: MEDIUM
Estimated Improvement: Reduced CPU usage, smoother interactions

Problem

Multiple components transform data for charts without memoization. These computations run on every render, even when the source data hasn't changed.

Locations

1. app/page.tsx - Chart data transformations
2. app/payer-accounts/page.tsx:882 - chartDates.map() transformation
3. app/payer-accounts/page.tsx:825 - payersData.map() transformation
4. components/dashboard/SparklineChart.tsx:11 - data.map() transformation

Current Pattern

// Runs on EVERY render, even if data unchanged
function DashboardCharts({ metrics }) {
  const chartData = metrics.chartDates.map((date, i) => ({
    date,
    payers: metrics.cumulativePayers[i],
    settled: metrics.cumulativeSettled[i],
  }));
  
  return <LineChart data={chartData} />;
}

Recommended Fix

function DashboardCharts({ metrics }) {
  // Only recomputes when metrics change
  const chartData = useMemo(() => 
    metrics.chartDates.map((date, i) => ({
      date,
      payers: metrics.cumulativePayers[i],
      settled: metrics.cumulativeSettled[i],
    })),
    [metrics.chartDates, metrics.cumulativePayers, metrics.cumulativeSettled]
  );
  
  return <LineChart data={chartData} />;
}

Also in SparklineChart:

export function SparklineChart({ data, color = "#1e1e1e" }: SparklineChartProps) {
  // Memoize the transformation
  const chartData = useMemo(
    () => data.map((value, index) => ({ value, index })),
    [data]
  );

  return (
    <ResponsiveContainer width="100%" height="100%">
      <LineChart data={chartData}>
        ...
      </LineChart>
    </ResponsiveContainer>
  );
}

Why This Matters

Without memoization:

• Array transformations run on every render
• Creates new object references causing child component re-renders
• Wastes CPU cycles, especially on low-powered devices
• Can cause jank during user interactions

References

• React useMemo
• When to useMemo and useCallback