feat: Use fastdom to batch writes and avoid sync layout (take two)

package.json

@@ -59,8 +59,10 @@
   },
   "dependencies": {
     "dom-helpers": "^3.4.0",
+    "fastdom": "^1.0.8",
     "loose-envify": "^1.4.0",
-    "prop-types": "^15.6.2"
+    "prop-types": "^15.6.2",
+    "webpack-atoms": "^10.0.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.4.3",

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
@@ -78,7 +73,7 @@ class CSSTransition extends React.Component {
     const { className } = this.getClassNames(appearing ? 'appear' : 'enter')
 
     this.removeClasses(node, 'exit');
-    addClass(node, className)
+    addClass(node, className, true)
 
     if (this.props.onEnter) {
       this.props.onEnter(node, appearing)
@@ -90,7 +85,7 @@ class CSSTransition extends React.Component {
       appearing ? 'appear' : 'enter'
     );
 
-    this.reflowAndAddClass(node, activeClassName)
+    addClass(node, activeClassName)
 
     if (this.props.onEntering) {
       this.props.onEntering(node, appearing)
@@ -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,26 @@
+import fastdom from 'fastdom';
+import addOneClass from 'dom-helpers/class/addClass';
+import removeOneClass from 'dom-helpers/class/removeClass';
+
+export function addClass(node, classes, immediate = false) {
+  mutateClass(node, classes, addOneClass, immediate);
+}
+export function removeClass(node, classes, immediate = false) {
+  mutateClass(node, classes, removeOneClass, immediate);
+}
+
+function mutateClass(node, classes, fn, immediate) {
+  if (!node) return;
+  if (classes && typeof classes === 'string') {
+    const run = () => 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 && !immediate) {
+      fastdom.mutate(run);
+    } else {
+      run();
+    }
+  }
+}