Minor performance optimizations

src/components/MeasureHeight.jsx

@@ -1,7 +1,7 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PureComponent, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 
-import { omit } from 'functions';
+import { omit, rAF } from 'functions';
 
 /**
  * MeasureHeight is a component that allows you to measure the height of elements wrapped.
@@ -23,7 +23,7 @@ import { omit } from 'functions';
  * </MeasureHeight>
  */
 
-export default class MeasureHeight extends Component {
+export default class MeasureHeight extends PureComponent {
     static displayName = 'MeasureHeight';
     static propTypes = {
         shouldMeasure: PropTypes.func,
@@ -55,6 +55,6 @@ export default class MeasureHeight extends Component {
     }
 
     measure() {
-        this.props.onMeasure(this.el.offsetHeight);
+        rAF(() => this.props.onMeasure(this.el.offsetHeight));
     }
 }

src/components/ui/form/Form.jsx

@@ -46,7 +46,9 @@ export default class Form extends Component {
             });
         }
 
-        if (typeof nextProps.isLoading !== 'undefined') {
+        if (typeof nextProps.isLoading !== 'undefined'
+            && nextProps.isLoading !== this.state.isLoading
+        ) {
             this.setState({
                 isLoading: nextProps.isLoading
             });

src/components/ui/scrollTo.js

@@ -4,34 +4,35 @@
  * @see http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html
  */
 
-const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame
-    || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+import { rAF } from 'functions';
 
 const TIME_CONSTANT = 100; // heigher numbers - slower animation
 export default function scrollTo(y, viewPort) {
     const start = Date.now();
-    const {scrollTop} = viewPort;
-    const amplitude = y - scrollTop;
     let scrollWasTouched = false;
+    rAF(() => { // wrap in rAF to optimize initial reading of scrollTop
+        const {scrollTop} = viewPort;
+        const amplitude = y - scrollTop;
 
-    requestAnimationFrame(function animateScroll() {
-        const elapsed = Date.now() - start;
+        (function animateScroll() {
+            const elapsed = Date.now() - start;
 
-        let delta = -amplitude * Math.exp(-elapsed / TIME_CONSTANT);
+            let delta = -amplitude * Math.exp(-elapsed / TIME_CONSTANT);
 
-        if (Math.abs(delta) > 0.5 && !scrollWasTouched) {
-            requestAnimationFrame(animateScroll);
-        } else {
-            delta = 0;
-            document.removeEventListener('mousewheel', markScrollTouched);
-            document.removeEventListener('touchstart', markScrollTouched);
-        }
+            if (Math.abs(delta) > 0.5 && !scrollWasTouched) {
+                rAF(animateScroll);
+            } else {
+                delta = 0;
+                document.removeEventListener('mousewheel', markScrollTouched);
+                document.removeEventListener('touchstart', markScrollTouched);
+            }
 
-        if (scrollWasTouched) {
-            return;
-        }
+            if (scrollWasTouched) {
+                return;
+            }
 
-        viewPort.scrollTop = y + delta;
+            viewPort.scrollTop = y + delta;
+        }());
     });
 
     document.addEventListener('mousewheel', markScrollTouched);

src/functions.js

@@ -40,3 +40,6 @@ export function loadScript(src) {
         document.body.appendChild(script);
     });
 }
+
+export const rAF = window.requestAnimationFrame || window.mozRequestAnimationFrame
+    || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

src/index.js

@@ -61,7 +61,7 @@ function restoreScroll() {
         }
 
         scrollTo(y, viewPort);
-    }, 100);
+    }, 200);
 }
 
 function stopLoading() {