perf(scroll): improve thread list scroll perf

Summary:
Lots of components were rendering when they didn't have to on the very
frequent account sidebar updates

Test Plan: manual

Reviewers: mark, juan

Reviewed By: juan

Differential Revision: https://phab.nylas.com/D3691

internal_packages/account-sidebar/lib/components/account-sidebar.cjsx

@@ -1,6 +1,6 @@
 _ = require 'underscore'
 React = require 'react'
-{AccountStore} = require 'nylas-exports'
+{Utils, AccountStore} = require 'nylas-exports'
 {OutlineView, ScrollRegion, Flexbox} = require 'nylas-component-kit'
 AccountSwitcher = require './account-switcher'
 SidebarStore = require '../sidebar-store'
@@ -22,6 +22,10 @@ class AccountSidebar extends React.Component
     @unsubscribers.push SidebarStore.listen @_onStoreChange
     @unsubscribers.push AccountStore.listen @_onStoreChange
 
+  shouldComponentUpdate: (nextProps, nextState) =>
+    not Utils.isEqualReact(nextProps, @props) or
+    not Utils.isEqualReact(nextState, @state)
+
   componentWillUnmount: =>
     unsubscribe() for unsubscribe in @unsubscribers
 

internal_packages/notifications/lib/sidebar/activity-sidebar.cjsx

@@ -7,7 +7,8 @@ classNames = require 'classnames'
 StreamingSyncActivity = require './streaming-sync-activity'
 InitialSyncActivity = require('./initial-sync-activity').default
 
-{Actions,
+{Utils,
+ Actions,
  TaskQueue,
  AccountStore,
  NylasSyncStatusStore,
@@ -24,6 +25,10 @@ class ActivitySidebar extends React.Component
   constructor: (@props) ->
     @state = @_getStateFromStores()
 
+  shouldComponentUpdate: (nextProps, nextState) =>
+    not Utils.isEqualReact(nextProps, @props) or
+    not Utils.isEqualReact(nextState, @state)
+
   componentDidMount: =>
     @_unlisteners = []
     @_unlisteners.push TaskQueueStatusStore.listen @_onDataChanged

internal_packages/notifications/lib/sidebar/initial-sync-activity.jsx

@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import _str from 'underscore.string';
 import classNames from 'classnames';
-import {Actions, AccountStore, NylasSyncStatusStore, React} from 'nylas-exports';
+import {Utils, Actions, AccountStore, NylasSyncStatusStore, React} from 'nylas-exports';
 
 const MONTH_SHORT_FORMATS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
   'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@@ -27,6 +27,11 @@ export default class InitialSyncActivity extends React.Component {
     ]
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return !Utils.isEqualReact(nextProps, this.props) ||
+      !Utils.isEqualReact(nextState, this.state);
+  }
+
   componentWillUnmount() {
     if (this.unsubs) {
       this.unsubs.forEach((unsub) => unsub())

internal_packages/notifications/lib/sidebar/streaming-sync-activity.cjsx

@@ -1,4 +1,4 @@
-{Actions, React} = require 'nylas-exports'
+{Utils, Actions, React} = require 'nylas-exports'
 {RetinaImg} = require 'nylas-component-kit'
 
 class StreamingSyncActivity extends React.Component
@@ -8,6 +8,10 @@ class StreamingSyncActivity extends React.Component
     @state =
       receivingDelta: false
 
+  shouldComponentUpdate: (nextProps, nextState) =>
+    not Utils.isEqualReact(nextProps, @props) or
+    not Utils.isEqualReact(nextState, @state)
+
   componentDidMount: =>
     @_unlistener = Actions.longPollReceivedRawDeltasPing.listen(@_onDeltaReceived)
 

src/components/list-tabular.cjsx

@@ -38,6 +38,10 @@ class ListTabular extends React.Component
     @setupDataSource(@props.dataSource)
     @updateRangeState()
 
+  shouldComponentUpdate: (nextProps, nextState) =>
+    not Utils.isEqualReact(nextProps, @props) or
+    not Utils.isEqualReact(nextState, @state)
+
   componentWillUnmount: =>
     window.removeEventListener('resize', @onWindowResize, true)
     window.clearTimeout(@_cleanupAnimationTimeout) if @_cleanupAnimationTimeout

src/components/outline-view-item.jsx

@@ -2,6 +2,7 @@
 /* eslint jsx-a11y/tabindex-no-positive:0 */
 
 import _ from 'underscore';
+import {Utils} from 'nylas-exports'
 import classnames from 'classnames';
 import React, {Component, PropTypes} from 'react';
 import ReactDOM from 'react-dom';
@@ -159,9 +160,9 @@ class OutlineViewItem extends Component {
     }
   }
 
-  shouldComponentUpdate() {
-    // TODO
-    return true;
+  shouldComponentUpdate(nextProps, nextState) {
+    return !Utils.isEqualReact(nextProps, this.props) ||
+      !Utils.isEqualReact(nextState, this.state);
   }
 
   componentWillUnmount() {

src/components/outline-view.jsx

@@ -1,3 +1,4 @@
+import {Utils} from 'nylas-exports'
 import React, {Component, PropTypes} from 'react';
 import DropZone from './drop-zone';
 import RetinaImg from './retina-img';
@@ -61,6 +62,11 @@ class OutlineView extends Component {
     showCreateInput: false,
   };
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return !Utils.isEqualReact(nextProps, this.props) ||
+      !Utils.isEqualReact(nextState, this.state);
+  }
+
   componentWillUnmount() {
     clearTimeout(this._expandTimeout);
   }