feat: Use fastdom to batch writes and avoid sync layout

package.json

@@ -59,6 +59,7 @@
   },
   "dependencies": {
     "dom-helpers": "^3.4.0",
+    "fastdom": "^1.0.8",
     "loose-envify": "^1.4.0",
     "prop-types": "^15.6.2"
   },

src/CSSTransition.js

@@ -1,14 +1,9 @@
 import * as PropTypes from 'prop-types';
-import addOneClass from 'dom-helpers/class/addClass';
-
-import removeOneClass from 'dom-helpers/class/removeClass';
 import React from 'react';
 
 import Transition from './Transition';
 import { classNamesShape } from './utils/PropTypes';
-
-const addClass = (node, classes) => node && classes && classes.split(' ').forEach(c => addOneClass(node, c));
-const removeClass = (node, classes) => node && classes && classes.split(' ').forEach(c => removeOneClass(node, c));
+import { addClass, removeClass } from './utils/ClassHelpers';
 
 /**
  * A transition component inspired by the excellent
@@ -90,7 +85,7 @@ class CSSTransition extends React.Component {
       appearing ? 'appear' : 'enter'
     );
 
-    this.reflowAndAddClass(node, activeClassName)
+    addClass(node, activeClassName, true /* reflow */)
 
     if (this.props.onEntering) {
       this.props.onEntering(node, appearing)
@@ -100,7 +95,7 @@ class CSSTransition extends React.Component {
   onEntered = (node, appearing) => {
     const appearClassName = this.getClassNames('appear').doneClassName;
     const enterClassName = this.getClassNames('enter').doneClassName;
-    const doneClassName = appearing
+    const doneClassName = (appearing && appearClassName && enterClassName)
       ? `${appearClassName} ${enterClassName}`
       : enterClassName;
 
@@ -127,7 +122,7 @@ class CSSTransition extends React.Component {
   onExiting = (node) => {
     const { activeClassName } = this.getClassNames('exit')
 
-    this.reflowAndAddClass(node, activeClassName)
+    addClass(node, activeClassName)
 
     if (this.props.onExiting) {
       this.props.onExiting(node)
@@ -173,17 +168,6 @@ class CSSTransition extends React.Component {
     doneClassName && removeClass(node, doneClassName);
   }
 
-  reflowAndAddClass(node, className) {
-    // This is for to force a repaint,
-    // which is necessary in order to transition styles when adding a class name.
-    if (className) {
-      /* eslint-disable no-unused-expressions */
-      node && node.scrollTop;
-      /* eslint-enable no-unused-expressions */
-      addClass(node, className);
-    }
-  }
-
   render() {
     const props = { ...this.props };
 

src/utils/ClassHelpers.js

@@ -0,0 +1,50 @@
+import fastdom from 'fastdom';
+import addOneClass from 'dom-helpers/class/addClass';
+import removeOneClass from 'dom-helpers/class/removeClass';
+
+export function addClass(node, classes, reflow) {
+  mutateClass(node, classes, reflow, addOneClass);
+}
+export function removeClass(node, classes, reflow) {
+  mutateClass(node, classes, reflow, removeOneClass);
+}
+
+function mutateClass(node, classes, reflow, fn) {
+  if (!node) return;
+  if (classes && typeof classes === 'string') {
+    const run = () => {
+      // A reflow is necessary to get the browser to respect the transition. However, it doesn't
+      // need to be done on every single class change, only when the 'active' class is added.
+      // Batching reflows allows us to avoid read-write-read context switches, by reading
+      // (node.scrollTop) completely before we write.
+      if (reflow) emptyReflow();
+      classes.split(' ').forEach(c => fn(node, c));
+    }
+    // If possible, on browsers, batch these mutations as to avoid synchronous layouts.
+    // But watch out - if we are batching them, and the page is inactive, we can end up
+    // hitching up the page for a very long time as these callbacks queue up on
+    // requestAnimationFrame. So only queue them up if the page is visible.
+    if (process.browser && document.hidden === false) {
+      // Is this an entering animation where we'll need to force a reflow?
+      if (reflow) reflowNodes.push(node);
+      // Schedule the modification for next tick.
+      fastdom.mutate(run);
+    } else {
+      run();
+    }
+  }
+}
+
+const reflowNodes = [];
+// Empty the `reflowNodes` array completely and reflow all of them at once.
+function emptyReflow() {
+  let node;
+  while (node = reflowNodes.pop()) forceReflow(node);
+}
+
+// This is for to force a repaint,
+// which is necessary in order to transition styles when adding a class name.
+function forceReflow(node) {
+  /* eslint-disable no-unused-expressions */
+  node && node.scrollTop;
+}

stories/TransitionGroup.js

@@ -12,8 +12,7 @@ storiesOf('Css Transition Group', module)
   .add('Animates on all', () => (
     <CSSTransitionGroupFixture
       description={`
-        Should animate when items are added to the list but not when they are
-        removed or on initial appear
+        Should animate on appear, add, and remove
       `}
       appear
       items={[ 'Item number: 1' ]}
@@ -37,7 +36,7 @@ storiesOf('Css Transition Group', module)
   .add('Animates on exit', () => (
     <CSSTransitionGroupFixture
       description={`
-        Should animate when items are removed to the list but not when they are
+        Should animate when items are removed from the list but not when they are
         added or on initial appear
       `}
       items={[

yarn.lock

@@ -5506,6 +5506,16 @@ fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
+fast-memoize@^2.2.7:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.4.0.tgz#2f79eca41c41112b0b70cf53ac3940e206574648"
+
+fastdom@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/fastdom/-/fastdom-1.0.8.tgz#10f9d36998fd6efae30e529597d788e750c9febb"
+  dependencies:
+    strictdom "^1.0.1"
+
 fastparse@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
@@ -11425,6 +11435,10 @@ strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
 
+strictdom@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strictdom/-/strictdom-1.0.1.tgz#189de91649f73d44d59b8432efa68ef9d2659460"
+
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"