description: Imported skill rendering_content_visibility from vercel name: rendering_content_visibility signature: 64eee6d5b916fe74df33363994b27fc7f71bea3bcedc7ee04bda23107ca3e6e4 source: /a0/tmp/skills_research/vercel/skills/react-best-practices/rules/rendering-content-visibility.md

title: CSS content-visibility for Long Lists impact: HIGH impactDescription: faster initial render tags: rendering, css, content-visibility, long-lists

CSS content-visibility for Long Lists

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

CSS:

css

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

Example:

tsx

function MessageList({ messages }: { messages: Message[] }) {
  return (
    <div className="overflow-y-auto h-screen">
      {messages.map(msg => (
        <div key={msg.id} className="message-item">
          <Avatar user={msg.author} />
          <div>{msg.content}</div>
        </div>
      ))}
    </div>
  )
}

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