[jefftchan]

Point #2 is especially spot on. Right now TransitionGroup clones every child [1] to preserve children for unmounting, but it's incredibly inefficient, especially if you have thousands of elements. Not to mention, as a side-effect, it requires wrappers to preserve refs. [2]

[1] https://github.com/facebook/react/blob/master/src/addons/tra... [2] https://github.com/facebook/react/issues/1950

[lobster_johnson]

Naive solution: What if every child had an intermediate parent node, something like:

    <Transition current={this.state.mode}>
      <TransitionItem name="map">
        <Map .../>
      </TransitionItem>
      <TransitionItem name="list">
        <List .../>
      </TransitionItem>
    </Transition>

By making the possible children explicit, you can preserve them in the virtual DOM as long as is needed. The actual child (Map and List) would be mounted/unmounted only as needed.