react-lifecycle

<Lifecycle
  props={{ list }}
  getDerivedStateFromProps={(props, state) => {
    const plist = props.list,
          slist = state.list;
    if (plist.length > slist.length) {
      return {
        list: plist.map(pit => 
          slist.findIndex(sit => sit.id===pit.id) > -1 ?
            pit :
            { ...pit, just_insert: true }
        )
      }
    }
    if (plist.length < slist.length) {
      return {
        list: slist.map(sit =>
          slist.find(pit => sit.id===pit.id) ||
          { ...sit, just_remove: true }
        )
      }
    }
    return props;
  }}
  componentDidUpdate={(prevProps, prevState, snapshot, instance) => {
    setTimeout(() => {
      instance.setState(state => ({ list: state.list.filter(it => !it.just_insert && !it.just_remove) }));
    }, 300);
  }}
>
  {state => state.list.map(it => (
    <div key={it.id} className={`${it.just_insert ? 'inserting' : ''} ${it.just_remove ? 'removing' : ''}`}>
      content
    </div>
  ))}
</Lifecycle>