Partial Rendering: Show What You Have, Fallback the Rest

Partial rendering means showing the data you have and filling the gaps with fallbacks, instead of hiding entire sections because one field is missing.

Real networks fail partially. An avatar URL doesn’t resolve, one API call comes back incomplete, and suddenly an entire profile header vanishes over a missing image, taking the name and email down with it.

One Missing Field Kills the Whole Section

The guard that throws the baby out with the bathwater:

function ProfileHeader({ user }) {
  if (!user.avatarUrl) return null;
  return (
    <div>
      <img src={user.avatarUrl} alt="" />
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

function App() {
  const user = { name: "John Doe", email: "john@example.com" };
  return (
    <div>
      <h1>Partial Rendering of Available Data</h1>
      <ProfileHeader user={user} />
    </div>
  );
}

export default App;

Replace Only the Missing Piece

Push the fallback into the smallest unit. The Avatar component falls back to a default image, and every other field renders regardless:

const FALLBACK_IMAGE_URL = "https://i.pravatar.cc/100?img=2";

function Avatar({ avatarUrl }) {
  const src = avatarUrl || FALLBACK_IMAGE_URL;
  return <img src={src} alt="User avatar" style={{ width: "100px", height: "100px", borderRadius: "50%" }} />;
}

function ProfileHeader({ user }) {
  return (
    <div>
      <Avatar avatarUrl={user.avatarUrl} />
      <div>
        <h2>{user.name}</h2>
        <p>{user.email}</p>
      </div>
    </div>
  );
}

function App() {
  const user = { name: "John Doe", email: "john@example.com" };
  return (
    <div>
      <h1>Partial Rendering of Available Data</h1>
      <ProfileHeader user={user} />
    </div>
  );
}

export default App;

The same idea covers names, descriptions, any field with a sensible stand-in. Log the failure rates, quietly, so you know which fallbacks are doing the most work, and pair this with error boundaries so a genuinely broken section degrades instead of detonating.