Conditionally animating results in stale DOM

[afreix]

I conditionally set enterAnimation/leaveAnimation to false on the FlipMove element. During the same render cycle the children of the FlipMove component are updated as well. This results in the DOM containing extra elements, and another render cycle needs to be initiated before FlipMove removes the extraneous elements from the DOM.

For a simplified example of what's happening imagine a connected component that gets the list elements and a shouldAnimate boolean.

<FlipMove enterAnimation={shouldAnimate} leaveAnimation={shouldAnimate}>{items}</FlipMove>

function mapStateToProps(state) {
  const shouldAnimate = getShouldAnimate(state);
  const items = getListItems(state);

  return {
    items,
    shouldAnimate,
  };
}

I can provide a more complete example if necessary, but I'm mainly wondering if this is expected behavior or if this has happened to anyone else.

[tobilen]

DOM cleanup is still somewhat sketchy and kind of lacking in test coverage. if you could provide an example, that would be very helpful, as it would provide something to develop against 👍