From 396a027bcb6b589fb37cd200b21a01273809ff5c Mon Sep 17 00:00:00 2001
From: Juan Tejada <juans.tejada@gmail.com>
Date: Tue, 28 Feb 2017 08:48:34 -0800
Subject: [PATCH] [client-app] Prevent unnecessary re-rendering of thread-list

Summary:
This commit adds a `shouldComponentUpdate` to thread-list.cjsx so that
the thread list doesn't unnecessarily /try/ to re-render when state or
props haven't actually changed.

I noticed this because the thread list was constantly calling `render`
even though it didn't render any changes to the DOM. This was caused
because it listens to `NylasSyncStatusStore` which constantly triggers,
even though the piece of state the list is interested in rarely changes,
causing unnecessary calls to the `render` loop.

Test Plan: manual

Reviewers: halla, evan

Reviewed By: evan

Differential Revision: https://phab.nylas.com/D4047
---
 .../thread-list/lib/thread-list.cjsx              | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/client-app/internal_packages/thread-list/lib/thread-list.cjsx b/packages/client-app/internal_packages/thread-list/lib/thread-list.cjsx
index d5fa606ba..99ef49170 100644
--- a/packages/client-app/internal_packages/thread-list/lib/thread-list.cjsx
+++ b/packages/client-app/internal_packages/thread-list/lib/thread-list.cjsx
@@ -10,6 +10,7 @@ classnames = require 'classnames'
  SyncingListState} = require 'nylas-component-kit'
 
 {Actions,
+ Utils,
  Thread,
  Category,
  CanvasUtils,
@@ -45,13 +46,17 @@ class ThreadList extends React.Component
 
   componentDidMount: =>
     @_reportAppBootTime()
-    @unsub = NylasSyncStatusStore.listen( => @setState
-      syncing: FocusedPerspectiveStore.current().hasSyncingCategories()
-    )
+    @unsub = NylasSyncStatusStore.listen(@_onSyncStatusChanged)
     window.addEventListener('resize', @_onResize, true)
     ReactDOM.findDOMNode(@).addEventListener('contextmenu', @_onShowContextMenu)
     @_onResize()
 
+  shouldComponentUpdate: (nextProps, nextState) =>
+    return (
+      (not Utils.isEqualReact(@props, nextProps)) or
+      (not Utils.isEqualReact(@state, nextState))
+    )
+
   componentDidUpdate: =>
     dataSource = ThreadListStore.dataSource()
     threads = dataSource.itemsCurrentlyInView()
@@ -221,6 +226,10 @@ class ThreadList extends React.Component
         accountIds: [thread.accountId]
       }
 
+  _onSyncStatusChanged: =>
+    syncing = FocusedPerspectiveStore.current().hasSyncingCategories()
+    @setState({syncing})
+
   _onShowContextMenu: (event) =>
     data = @_targetItemsForMouseEvent(event)
     if not data