Performance Optimization

function Parent() {
  const [count, setCount] = React.useState(0)
  const [name, setName] = React.useState('Alice')
  
  return (
    <div>
      <input value={name} onChange={e => setName(e.target.value)} />
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      
      {/* ❌ Problem: ExpensiveChild re-renders when name changes */}
      <ExpensiveChild count={count} />
    </div>
  )
}

function ExpensiveChild({ count }) {
  console.log('ExpensiveChild rendered')
  
  // Expensive calculation
  const result = expensiveCalculation(count)
  
  return <div>Result: {result}</div>
}

// When you type in input:
// 1. name changes
// 2. Parent re-renders
// 3. ExpensiveChild re-renders (even though count didn't change!)
// 4. Expensive calculation runs again (wasteful!)

function Parent() {
  const [count, setCount] = React.useState(0)
  const [name, setName] = React.useState('Alice')
  
  return (
    <div>
      <input value={name} onChange={e => setName(e.target.value)} />
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      
      {/* ✅ Solution: MemoizedChild only re-renders when count changes */}
      <MemoizedChild count={count} />
    </div>
  )
}

// Wrap component in React.memo
const MemoizedChild = React.memo(function ExpensiveChild({ count }) {
  console.log('ExpensiveChild rendered')
  
  const result = expensiveCalculation(count)
  
  return <div>Result: {result}</div>
})

// Now when you type:
// 1. name changes
// 2. Parent re-renders
// 3. React.memo checks: did props change?
// 4. count is same → skip re-render!
// 5. Expensive calculation not run (fast!)

// Default: Shallow comparison of props
const MemoizedComponent = React.memo(Component)

// Custom comparison function
const MemoizedComponent = React.memo(Component, (prevProps, nextProps) => {
  // Return true if props are equal (skip re-render)
  // Return false if props changed (do re-render)
  
  return prevProps.id === nextProps.id && 
         prevProps.name === nextProps.name
})

// Example: Only re-render if user ID changes
const UserProfile = React.memo(
  function UserProfile({ user, theme }) {
    return (
      <div>
        <h1>{user.name}</h1>
        <p>{user.email}</p>
      </div>
    )
  },
  (prevProps, nextProps) => {
    // Only compare user.id, ignore theme changes
    return prevProps.user.id === nextProps.user.id
  }
)

// ⚠️ Careful: Custom comparison can be expensive too!
// Only use when default comparison isn't enough

import React, { Suspense, lazy } from 'react'

// ❌ Regular import - Loaded immediately
import Dashboard from './Dashboard'

// ✅ Lazy import - Loaded only when needed
const Dashboard = lazy(() => import('./Dashboard'))

function App() {
  const [showDashboard, setShowDashboard] = React.useState(false)
  
  return (
    <div>
      <button onClick={() => setShowDashboard(true)}>
        Show Dashboard
      </button>
      
      {showDashboard && (
        <Suspense fallback={<div>Loading...</div>}>
          <Dashboard />
        </Suspense>
      )}
    </div>
  )
}

// How it works:
// 1. Dashboard code not in initial bundle
// 2. User clicks button
// 3. Dashboard code downloaded
// 4. Loading... shown while downloading
// 5. Dashboard rendered when ready

// Benefits:
// ✅ Smaller initial bundle
// ✅ Faster initial load
// ✅ Better user experience

import { lazy, Suspense } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

// Lazy load page components
const Home = lazy(() => import('./pages/HomePage'))
const About = lazy(() => import('./pages/AboutPage'))
const Dashboard = lazy(() => import('./pages/DashboardPage'))
const Profile = lazy(() => import('./pages/ProfilePage'))

// Loading component
function LoadingSpinner() {
  return (
    <div className="loading">
      <div className="spinner"></div>
      <p>Loading...</p>
    </div>
  )
}

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<LoadingSpinner />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  )
}

// Each route is a separate chunk
// Only loads when user navigates to it!

// Bundle results:
// main.js - Core app (small)
// home.js - Home page
// about.js - About page
// dashboard.js - Dashboard page
// profile.js - Profile page

// Component file with named export
// UserProfile.jsx
export function UserProfile({ userId }) {
  return <div>User {userId}</div>
}

// ❌ Won't work - lazy needs default export
const UserProfile = lazy(() => import('./UserProfile'))

// ✅ Solution 1: Change to default export
// UserProfile.jsx
export default function UserProfile({ userId }) {
  return <div>User {userId}</div>
}

// ✅ Solution 2: Create wrapper with default export
const UserProfile = lazy(() => 
  import('./UserProfile').then(module => ({
    default: module.UserProfile
  }))
)

// ✅ Solution 3: Re-export as default
// UserProfile.jsx
export function UserProfile({ userId }) {
  return <div>User {userId}</div>
}
export { UserProfile as default }

// Lazy loading requires default exports!

# Install bundle analyzer
npm install --save-dev webpack-bundle-analyzer

# For Create React App
npm install --save-dev cra-bundle-analyzer

# Build and analyze
npm run build
npx cra-bundle-analyzer

# Shows visual representation of bundle contents
# Identify large dependencies to optimize

// ❌ Bad - Imports entire library
import _ from 'lodash'
const result = _.debounce(fn, 300)

// ✅ Good - Imports only debounce
import debounce from 'lodash/debounce'
const result = debounce(fn, 300)

// ❌ Bad - Imports all icons
import * as Icons from 'react-icons/fa'
<Icons.FaUser />

// ✅ Good - Imports specific icon
import { FaUser } from 'react-icons/fa'
<FaUser />

// ❌ Bad - Imports entire Material-UI
import { Button, TextField, Modal } from '@mui/material'

// ✅ Good - Direct imports
import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'
import Modal from '@mui/material/Modal'

// Tree-shaking removes unused code
// Only works with ES6 imports!

# Find unused dependencies
npx depcheck

# Remove unused packages
npm uninstall unused-package

# Check for duplicate dependencies
npm dedupe

# Regularly audit dependencies
npm audit

// ❌ Bad - No key or index as key
users.map(user => <UserCard user={user} />)
users.map((user, index) => <UserCard key={index} user={user} />)

// ✅ Good - Unique, stable ID as key
users.map(user => <UserCard key={user.id} user={user} />)

// Why keys matter:
// - React uses keys to track items
// - Stable keys = efficient updates
// - Index as key = bad performance on reorder/filter

// For lists with 1000+ items, use virtualization
// Library: react-window or react-virtualized

import { FixedSizeList } from 'react-window'

function LargeList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].name}
    </div>
  )
  
  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  )
}

// Only renders visible items!
// Handles 10,000+ items smoothly

Steps to profile:
1. Install React DevTools browser extension
2. Open DevTools → Profiler tab
3. Click record button (circle)
4. Interact with your app
5. Click stop button
6. Analyze results:
   - Flame graph shows component hierarchy
   - Ranked chart shows slowest components
   - Click components to see render details

What to look for:
- Components that render frequently
- Long render times
- Unnecessary re-renders
- Large component trees

Color coding:
- Gray: Did not render
- Green: Fast render
- Yellow: Medium render
- Red: Slow render (optimize these!)

import { Profiler } from 'react'

function onRenderCallback(
  id,                 // Component identifier
  phase,              // "mount" or "update"
  actualDuration,     // Time to render
  baseDuration,       // Estimated time without memoization
  startTime,          // When render started
  commitTime,         // When render committed
  interactions        // Set of interactions
) {
  console.log(`${id} took ${actualDuration}ms to render`)
  
  // Send to analytics
  if (actualDuration > 100) {
    analytics.track('slow-render', {
      component: id,
      duration: actualDuration
    })
  }
}

function App() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <Dashboard />
      <Sidebar />
      <Content />
    </Profiler>
  )
}

// Wrap components to measure performance
// Production-safe, minimal overhead