Performance optimization in React applications is crucial for delivering excellent user experiences. This guide covers advanced techniques to make your React apps lightning-fast.

Core Optimization Strategies

Memoization Techniques

import { memo, useMemo, useCallback } from 'react'

// Component memoization
const ExpensiveComponent = memo(({ data, onUpdate }) => {
  const processedData = useMemo(() => {
    return data.map((item) => ({
      ...item,
      computed: expensiveCalculation(item),
    }))
  }, [data])

  const handleUpdate = useCallback(
    (id) => {
      onUpdate(id)
    },
    [onUpdate]
  )

  return (
    <div>
      {processedData.map((item) => (
        <Item
          key={item.id}
          data={item}
          onUpdate={handleUpdate}
        />
      ))}
    </div>
  )
})

Virtual List Implementation

import { FixedSizeList as List } from 'react-window'

const VirtualizedList = ({ items }) => {
  const Row = ({ index, style }) => (
    <div style={style}>
      <ItemComponent data={items[index]} />
    </div>
  )

  return (
    <List
      height={600}
      itemCount={items.length}
      itemSize={80}
      width="100%"
    >
      {Row}
    </List>
  )
}

Code Splitting Strategies

// Route-based splitting
const Dashboard = lazy(() => import('./Dashboard'))
const Analytics = lazy(() => import('./Analytics'))

// Component-based splitting
const HeavyChart = lazy(() =>
  import('./HeavyChart').then((module) => ({
    default: module.HeavyChart,
  }))
)

Performance Monitoring

Web Vitals Integration

import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals'

function sendToAnalytics(metric) {
  gtag('event', metric.name, {
    value: Math.round(metric.value),
    event_label: metric.id,
  })
}

getCLS(sendToAnalytics)
getFID(sendToAnalytics)
getFCP(sendToAnalytics)
getLCP(sendToAnalytics)
getTTFB(sendToAnalytics)

React DevTools Profiler

import { Profiler } from 'react'

function onRenderCallback(id, phase, actualDuration) {
  // Log performance data
  console.log('Component:', id, 'Phase:', phase, 'Duration:', actualDuration)
}

function App() {
  return (
    <Profiler
      id="App"
      onRender={onRenderCallback}
    >
      <Header />
      <Main />
      <Footer />
    </Profiler>
  )
}

Bundle Optimization

Tree Shaking

// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    sideEffects: false,
  },
}

Performance optimization is an ongoing process that requires continuous monitoring and refinement. These techniques will help you build faster, more efficient React applications.