Past Work Preview

// React component with performance optimization
import React, { memo, useMemo } from 'react';
import { useQuery } from '@tanstack/react-query';

const Dashboard = memo(({ userId }) => {
  const { data, isLoading } = useQuery({
    queryKey: ['dashboard', userId],
    queryFn: () => fetchDashboardData(userId),
    staleTime: 5 * 60 * 1000, // 5 minutes
  });

  const chartData = useMemo(() =>
    processChartData(data?.metrics), [data?.metrics]
  );

  if (isLoading) return <DashboardSkeleton />;

  return (
    <div className="dashboard">
      <MetricsGrid data={data.metrics} />
      <Chart data={chartData} />
    </div>
  );
});