Vacancy Observer Example

user-profile.jsx

/*
 * <UserProfile/> React component which
 * uses the vacancy observer pattern.
 */

function UserProfile({
  userId, // comes from the URL
  users, // collection of fetched items
}) {
  const user = users[userId];
  if (user) {
    return <div>
      First Name: { user.first }
      Last Name: { user.last }
      ...
    </div>
  } else {
    return <div data-vacancy={`users/${userId}`}>
      Loading...
    </div>
  }
}

Vacancy observer pattern described here: https://medium.com/@greim/a-plan-for-data-fetching-a68d171af38