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 (
-
onSelect(flow)}>
+
onSelect(flow.id)}>
{columns.map(Column => (
))}
)
}
+
+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 && [
,
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)
+ }
+}