React Performance

React Performance

React is fast by default, but large apps need intentional optimization. Profile first — never optimize without measuring.

React.memo

// Re-renders only when its props change
const CourseCard = React.memo(function CourseCard({ course }: { course: Course }) {
  return (
    <div className="card">
      <h3>{course.title}</h3>
      <p>{course.xp} XP</p>
    </div>
  )
})

Combine with useCallback for onClick handlers passed as props — otherwise a new function reference breaks memo.

Lazy Loading with Suspense

import { lazy, Suspense } from 'react'

const AudiobookPlayer = lazy(() => import('@/components/AudiobookPlayer'))
const CertificatePage = lazy(() => import('@/app/certifications/page'))

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AudiobookPlayer courseId={id} />
    </Suspense>
  )
}

Next.js has its own dynamic import: import dynamic from 'next/dynamic'.

Key-based Reset

// Force a component to fully reset state by changing its key
function SearchResults({ query }: { query: string }) {
  return <ResultsList key={query} query={query} />
}

When key changes, React unmounts and remounts — all internal state resets.

Batched State Updates

React 18 automatically batches all state updates — even in async code:

// React 18 — one re-render for all three
async function handleSubmit() {
  setLoading(true)
  setError(null)
  setData(null)
  // ^ batched — one render

  const result = await saveData()

  setLoading(false)  // batched
  setData(result)    // with the line above
}