limscoder

const exitUsers = d3.select('ul.app-user-list')
  .selectAll('li.app-user')
  .data(users)
  .exit();

// remove stale elements from the document
exitUsers.remove();

limscoder

// html:
// <ul>
//   <li></li>
//   <li></li>
// </ul>

const users = [{
  id: 1,
  name: 'Nancy',
  role: 'person'

limscoder

const renderedUsers = d3.selectAll('li.app-user')
  .data(users, d => d.id);

limscoder

selection.attr('text', d => d.name)
  .style('color', d => (d.role === 'human' ? 'purple' : 'yellow'));

limscoder

// html:
// <ul>
//   <li></li>
//   <li></li>
// </ul>

const users = [{
  id: 1,
  name: 'Nancy',
  role: 'person'

limscoder

type FunctionComponent<P, S> = (props: P, context: S) => ?React$Element<any>;
type ClassComponent<D, P, S> = Class<React$Component<D, P, S>>;
type ReactComponent<D, P, S> = FunctionComponent<P, S> | ClassComponent<D, P, S>;

function ImmutableComponent<D, P, S, T: ReactComponent<D, P, S>>({ component: Component, componentProps }: {
  component: T,
  componentProps: P
}) {
  return <Component { ...componentProps }/>;
}