Fix TM stale read bug

Repro: go to todomvc, check an item, type something that'd filter it
out, see that for the brief unmounting animation the check mark is gone
(stale `isDone: false`).

This fixes that by removing the dirty check in `clearUnreadPropStyle`.
We now setState every time this is called (every willUpdate). This is
not underperformant as willUpdate will batch that setState without
triggering an extra render.

There are a bunch of nuances in this. I knew the staleness was a problem
but kept the dirty check anyway because fwiw `rehydrateStyles` always
picked the freshest `data` (the field in `TransitionStyle`), and the
dirty data is never read anywhere. Apparently I was wrong. This piece is
tricky and should be revisited/commented better.

(No test yet.)

src/TransitionMotion.js

@@ -19,21 +19,19 @@ import type {
 
 const msPerFrame = 1000 / 60;
 
-type TransitionMotionState = {
-  currentStyles: Array<PlainStyle>,
-  currentVelocities: Array<Velocity>,
-  lastIdealStyles: Array<PlainStyle>,
-  lastIdealVelocities: Array<Velocity>,
-  mergedPropsStyles: Array<TransitionStyle>,
-};
-
+// the children function & (potential) styles function asks as param an
+// Array<TransitionPlainStyle>, where each TransitionPlainStyle is of the format
+// {key: string, data?: any, style: PlainStyle}. However, the way we keep
+// internal states doesn't contain such a data structure (check the state and
+// TransitionMotionState). So when children function and others ask for such
+// data we need to generate them on the fly by combining mergedPropsStyles and
+// currentStyles/lastIdealStyles
 function rehydrateStyles(
   mergedPropsStyles: Array<TransitionStyle>,
   unreadPropStyles: ?Array<TransitionStyle>,
   plainStyles: Array<PlainStyle>,
 ): Array<PlainStyle> {
   if (unreadPropStyles == null) {
-    // no stale props styles value
     // $FlowFixMe
     return mergedPropsStyles.map((mergedPropsStyle, i) => ({
       key: mergedPropsStyle.key,
@@ -47,12 +45,14 @@ function rehydrateStyles(
       // $FlowFixMe
       if (unreadPropStyles[j].key === mergedPropsStyle.key) {
         return {
+          // $FlowFixMe
           key: unreadPropStyles[j].key,
           data: unreadPropStyles[j].data,
           style: plainStyles[i],
         };
       }
     }
+    // $FlowFixMe
     return {key: mergedPropsStyle.key, data: mergedPropsStyle.data, style: plainStyles[i]};
   });
 }
@@ -165,6 +165,23 @@ function mergeAndSync(
   return [newMergedPropsStyles, newCurrentStyles, newCurrentVelocities, newLastIdealStyles, newLastIdealVelocities];
 }
 
+type TransitionMotionState = {
+  // list of styles, each containing interpolating values. Part of what's passed
+  // to children function. Notice that this is
+  // Array<ActualInterpolatingStyleObject>, without the wrapper that is {key: ...,
+  // data: ... style: ActualInterpolatingStyleObject}. Only mergedPropsStyles
+  // contains the key & data info (so that we only have a single source of truth
+  // for these, and to save space). Check the comment for `rehydrateStyles` to
+  // see how we regenerate the entirety of what's passed to children function
+  currentStyles: Array<PlainStyle>,
+  currentVelocities: Array<Velocity>,
+  lastIdealStyles: Array<PlainStyle>,
+  lastIdealVelocities: Array<Velocity>,
+  // the array that keeps track of currently rendered stuff! Including stuff
+  // that you've unmounted but that's still animating. This is where it lives
+  mergedPropsStyles: Array<TransitionStyle>,
+};
+
 const TransitionMotion = React.createClass({
   propTypes: {
     defaultStyles: PropTypes.arrayOf(PropTypes.shape({
@@ -191,6 +208,8 @@ const TransitionMotion = React.createClass({
   getDefaultProps(): {willEnter: WillEnter, willLeave: WillLeave} {
     return {
       willEnter: styleThatEntered => stripStyle(styleThatEntered.style),
+      // recall: returning null makes the current unmounting TransitionStyle
+      // disappear immediately
       willLeave: () => null,
     };
   },
@@ -272,7 +291,6 @@ const TransitionMotion = React.createClass({
       this.state.lastIdealVelocities,
     );
 
-    let someDirty = false;
     for (let i = 0; i < unreadPropStyles.length; i++) {
       const unreadPropStyle = unreadPropStyles[i].style;
       let dirty = false;
@@ -286,7 +304,6 @@ const TransitionMotion = React.createClass({
         if (typeof styleValue === 'number') {
           if (!dirty) {
             dirty = true;
-            someDirty = true;
             currentStyles[i] = {...currentStyles[i]};
             currentVelocities[i] = {...currentVelocities[i]};
             lastIdealStyles[i] = {...lastIdealStyles[i]};
@@ -306,15 +323,16 @@ const TransitionMotion = React.createClass({
       }
     }
 
-    if (someDirty) {
-      this.setState({
-        currentStyles,
-        currentVelocities,
-        mergedPropsStyles,
-        lastIdealStyles,
-        lastIdealVelocities,
-      });
-    }
+    // unlike the other 2 components, we can't detect staleness and optionally
+    // opt out of setState here. each style object's data might contain new
+    // stuff we're not/cannot compare
+    this.setState({
+      currentStyles,
+      currentVelocities,
+      mergedPropsStyles,
+      lastIdealStyles,
+      lastIdealVelocities,
+    });
   },
 
   startAnimationIfNecessary(): void {

src/stripStyle.js

@@ -1,6 +1,6 @@
 /* @flow */
 // turn {x: {val: 1, stiffness: 1, damping: 2}, y: 2} generated by
-// `{x: spring(1, [1, 2]), y: 2}` into {x: 1, y: 2}
+// `{x: spring(1, {stiffness: 1, damping: 2}), y: 2}` into {x: 1, y: 2}
 
 import type {Style, PlainStyle} from './Types';