React Performance Optimization

Analysis Tools

React DevTools Profiler visualizes component rendering. Chrome Performance panel analyzes JavaScript execution.

Avoid Unnecessary Renders

const Memoized = React.memo(({ data }) => {
  return <div>{data.name}</div>
})

function List({ items, filter }) {
  const filtered = useMemo(() => {
    return items.filter(i => i.category === filter)
  }, [items, filter])
}

Code Splitting

const Lazy = React.lazy(() => import('./Heavy'))
function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Lazy />
    </Suspense>
  )
}

Best Practices

• Use React.memo for expensive components
• Use useMemo for expensive calculations
• Use useCallback for stable function references
• Implement code splitting with React.lazy