react-rendering-performance

React Rendering Performance

Patterns for optimizing the rendering process to reduce browser work.

1. Animate SVG Wrapper Instead of SVG Element

Impact: LOW - Enables hardware acceleration

Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a <div> and animate the wrapper.

Incorrect: animating SVG directly - no hardware acceleration

function LoadingSpinner() {
  return (
    <svg className="animate-spin" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="10" />
    </svg>
  )
}

Correct: animating wrapper div - hardware accelerated

function LoadingSpinner() {
  return (
    <div className="animate-spin">
      <svg viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="10" />
      </svg>
    </div>
  )
}

This applies to all CSS transforms and transitions (transform, opacity, translate, scale, rotate).

---

2. CSS content-visibility for Long Lists

Impact: HIGH - Faster initial render

Apply content-visibility: auto to defer off-screen rendering.

CSS:

.message-item {
  content-visibility: auto;
  contain-intrinsic-size: 0 80px;
}

Usage:

function MessageList({ messages }: { messages: Message[] }) {
  return (
    <div className="message-list">
      {messages.map(msg => (
        <div key={msg.id} className="message-item">
          <MessageContent content={msg.content} />
        </div>
      ))}
    </div>
  )
}

For 1000 messages, browser skips layout/paint for ~990 off-screen items (10x faster initial render).

---

3. Hoist Static JSX Elements

Impact: LOW - Avoids re-creation

Extract static JSX outside components to avoid re-creation on every render.

Incorrect: recreates element every render

function LoadingSkeleton() {
  return <div className="skeleton animate-pulse" />
}

function Container() {
  return (
    <div>
      {loading && <LoadingSkeleton />}
    </div>
  )
}

Correct: reuses same element