From 3d6f714b5d768b7ce24091f03a0e05e47a534271 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Thu, 21 Jul 2016 03:00:10 -0700
Subject: [PATCH] web: perf++

---
 web/src/js/components/FlowTable/FlowRow.jsx |  7 +++++--
 web/src/js/components/MainView.jsx          |  2 +-
 web/src/js/utils.js                         | 19 +++++++++++++++++--
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/web/src/js/components/FlowTable/FlowRow.jsx b/web/src/js/components/FlowTable/FlowRow.jsx
index 749bc0ce4..7961d5026 100644
--- a/web/src/js/components/FlowTable/FlowRow.jsx
+++ b/web/src/js/components/FlowTable/FlowRow.jsx
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
 import classnames from 'classnames'
 import columns from './FlowColumns'
+import { pure } from '../../utils'
 
 FlowRow.propTypes = {
     onSelect: PropTypes.func.isRequired,
@@ -9,7 +10,7 @@ FlowRow.propTypes = {
     selected: PropTypes.bool,
 }
 
-export default function FlowRow({ flow, selected, highlighted, onSelect }) {
+function FlowRow({ flow, selected, highlighted, onSelect }) {
     const className = classnames({
         'selected': selected,
         'highlighted': highlighted,
@@ -19,10 +20,12 @@ export default function FlowRow({ flow, selected, highlighted, onSelect }) {
     })
 
     return (
-        <tr className={className} onClick={() => onSelect(flow)}>
+        <tr className={className} onClick={() => onSelect(flow.id)}>
             {columns.map(Column => (
                 <Column key={Column.name} flow={flow}/>
             ))}
         </tr>
     )
 }
+
+export default pure(FlowRow)
diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx
index d7d1ebebc..f45f9eef3 100644
--- a/web/src/js/components/MainView.jsx
+++ b/web/src/js/components/MainView.jsx
@@ -22,7 +22,7 @@ class MainView extends Component {
                     flows={flows}
                     selected={selectedFlow}
                     highlight={highlight}
-                    onSelect={flow => this.props.selectFlow(flow.id)}
+                    onSelect={this.props.selectFlow}
                 />
                 {selectedFlow && [
                     <Splitter key="splitter"/>,
diff --git a/web/src/js/utils.js b/web/src/js/utils.js
index eceda1959..eecacfbbe 100644
--- a/web/src/js/utils.js
+++ b/web/src/js/utils.js
@@ -1,7 +1,9 @@
-import _ from "lodash";
+import _ from 'lodash'
+import React from 'react'
+import shallowEqual from 'shallowequal'
 
 window._ = _;
-window.React = require("react");
+window.React = React;
 
 export var Key = {
     UP: 38,
@@ -105,3 +107,16 @@ fetchApi.put = (url, json, options) => fetchApi(
         ...options
     }
 )
+
+export const pure = renderFn => class extends React.Component {
+    static displayName = renderFn.name
+
+    shouldComponentUpdate(nextProps) {
+        console.log(!shallowEqual(this.props, nextProps))
+        return !shallowEqual(this.props, nextProps)
+    }
+
+    render() {
+        return renderFn(this.props)
+    }
+}