[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
This commit is contained in:
Juan Tejada 2017-02-28 08:48:34 -08:00
parent 1e7541a1ee
commit 396a027bcb

View file

@ -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