optimize-react-component

name	optimize-react-component
description	Optimize React components for performance following Next.js 15 and project best practices

When optimizing React components in this Next.js 15 dashboard:

1. Choose the right component type:

   • Default to Server Components (no "use client")
   • Use Client Components only when needed:
     • Using React hooks (useState, useEffect, useContext)
     • Using browser APIs (localStorage, window)
     • Using event handlers (onClick, onChange)
     • Using libraries that require client-side execution

2. Minimize client-side JavaScript:

   // Good: Server Component (default)
   export default function StaticContent() {
     return <div>Content</div>;
   }
   
   // Use client only when necessary
   "use client";
   export default function InteractiveContent() {
     const [state, setState] = useState(false);
     return <div onClick={() => setState(!state)}>Content</div>;
   }
   

3. Optimize re-renders with React.memo and useMemo:

   import { memo, useMemo } from "react";
   
   // Memoize expensive computations
   const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
     const processedData = useMemo(() => {
       return data.map(item => expensiveOperation(item));
     }, [data]);
     
     return <div>{processedData}</div>;
   });
   

4. Use dynamic imports for large components:

   import dynamic from "next/dynamic";
   
   const HeavyChart = dynamic(() => import("@/components/HeavyChart"), {
     loading: () => <p>Loading chart...</p>,
     ssr: false // Disable SSR if component uses browser APIs
   });
   

5. Optimize images with next/image:

   import Image from "next/image";
   
   <Image
     src="/image.png"
     alt="Description"
     width={500}
     height={300}
     priority // For above-the-fold images
   />
   

6. Prevent unnecessary effect executions:

   // Include all dependencies
   useEffect(() => {
     fetchData(id);
   }, [id]); // Specify dependencies
   
   // Cleanup side effects
   useEffect(() => {
     const subscription = subscribe();
     return () => subscription.unsubscribe();
   }, []);
   

7. Type safety for better performance:

   • Use explicit TypeScript interfaces
   • Avoid any type
   • Enable strict mode in tsconfig.json

8. Component splitting:

   • Keep components focused on single responsibility
   • Extract reusable logic to custom hooks
   • Split large components into smaller ones

9. Leverage Turbopack (Next.js 15):

   • Use npm run dev which automatically uses Turbopack
   • Faster builds and hot module replacement

Examples

Convert client component to server component

// Before (unnecessarily client-side)
"use client";
export default function StaticCard() {
  return <Card>Static Content</Card>;
}

// After (server component)
export default function StaticCard() {
  return <Card>Static Content</Card>;
}

Optimize chart rendering

"use client";
import { memo, useMemo } from "react";
import { LineChart, Line } from "recharts";

export const OptimizedChart = memo(function OptimizedChart({ data }) {
  const colors = useChartColors();
  
  // Memoize processed data
  const chartData = useMemo(() => {
    return data.map(item => ({
      name: item.label,
      value: item.total
    }));
  }, [data]);
  
  return (
    <LineChart data={chartData}>
      <Line dataKey="value" stroke={colors.chart1} />
    </LineChart>
  );
});

Split a large component

// Before: One large component
export default function Dashboard() {
  return (
    <div>
      <Header />
      <Stats />
      <Charts />
      <Footer />
    </div>
  );
}

// After: Split into smaller, focused components
export default function Dashboard() {
  return (
    <div>
      <DashboardHeader />
      <DashboardStats />
      <DashboardCharts />
      <DashboardFooter />
    </div>
  );
}

// Each component in its own file
// Easier to maintain, optimize, and test

Related Files

• next.config.ts
• tsconfig.json
• src/components/DashboardCharts.tsx

Related Skills

• create-dashboard-page
• add-chart