web: perf++

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)

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"/>,

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)
+    }
+}