Concurrent-proof components

Server Components let you fetch data right where you render it, which is wonderful until you realize how often the same component shows up. An author avatar renders on the post, on every comment, on the hover card, and in the notifications rail. If each one fetches the author independently, a single feed can fire hundreds of identical database queries.

The duplication

Every instance does its own round trip.

async function AuthorAvatar({ userId }) {
  const user = await db.users.get(userId)

  return <img src={user.avatarUrl} alt={user.name} />
}

Render twelve posts from the same person and you pay for twelve identical lookups in one request.

The fix

Wrap the query in React’s cache. Within a single request, repeated calls with the same arguments return the same in flight promise, so the work happens once and every caller shares the result.

import { cache } from 'react'

const getUser = cache((userId) => db.users.get(userId))

async function AuthorAvatar({ userId }) {
  const user = await getUser(userId)

  return <img src={user.avatarUrl} alt={user.name} />
}

The component reads as if it fetches its own data, which keeps it composable, but the deduplication happens for free. Concurrency stops being a performance trap.