From 556913eec0fd63404f45a90764d05b494f29c988 Mon Sep 17 00:00:00 2001
From: Brendan Abbott <brendan.abbott@temando.com>
Date: Fri, 2 Jun 2017 00:20:42 +1000
Subject: [PATCH 1/2] Migrate to pure components where possible, implement
 shouldComponentUpdate where possible

---
 package.json                                  |  1 +
 src/components/BodyContent/BodyContent.js     |  4 ----
 src/components/BodySchema/BodySchema.js       |  7 +++++--
 .../ContentContainer/ContentContainer.js      |  4 ++--
 src/components/CopyButton/CopyButton.js       | 10 ++--------
 src/components/Description/Description.js     |  4 ++--
 src/components/Header/Header.js               |  5 +++--
 src/components/Indicator/Indicator.js         |  4 ++--
 src/components/Method/Method.js               | 20 +++++--------------
 src/components/Navigation/Navigation.js       |  8 ++++++++
 .../NavigationMethod/NavigationMethod.js      |  4 ++--
 src/components/NavigationTag/NavigationTag.js |  7 +++++++
 src/components/Page/Page.js                   | 18 +++++++----------
 src/components/Property/Property.js           |  4 ++--
 src/components/Response/Response.js           |  4 ++--
 .../ServiceContainer/ServiceContainer.js      |  7 +++----
 yarn.lock                                     |  7 +++++++
 17 files changed, 60 insertions(+), 58 deletions(-)

diff --git a/package.json b/package.json
index 5f9f9e4..2da0a85 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "jest": "^20.0.4",
     "json-loader": "^0.5.4",
     "node-sass": "^4.5.1",
+    "react-addons-perf": "^15.4.2",
     "react-test-renderer": "^15.5.4",
     "sass-loader": "^6.0.3",
     "style-loader": "^0.16.0",
diff --git a/src/components/BodyContent/BodyContent.js b/src/components/BodyContent/BodyContent.js
index 8e59f3b..1131af2 100644
--- a/src/components/BodyContent/BodyContent.js
+++ b/src/components/BodyContent/BodyContent.js
@@ -11,10 +11,6 @@ export default class BodyContent extends Component {
   constructor (props) {
     super(props)
 
-    this.renderTabs = this.renderTabs.bind(this)
-    this.renderSchema = this.renderSchema.bind(this)
-    this.renderExamples = this.renderExamples.bind(this)
-
     this.state = {
       tab: 'schema'
     }
diff --git a/src/components/BodySchema/BodySchema.js b/src/components/BodySchema/BodySchema.js
index 15dd8a9..2ca50e4 100644
--- a/src/components/BodySchema/BodySchema.js
+++ b/src/components/BodySchema/BodySchema.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import createFragment from 'react-addons-create-fragment'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import isEqual from 'lodash/isEqual'
 
 import Property from '../Property/Property'
 
@@ -11,8 +12,6 @@ export default class BodySchema extends Component {
   constructor (props) {
     super(props)
 
-    this.renderPropertyRow = this.renderPropertyRow.bind(this)
-    this.renderSubsetProperties = this.renderSubsetProperties.bind(this)
     this.onClick = this.onClick.bind(this)
 
     this.state = {
@@ -20,6 +19,10 @@ export default class BodySchema extends Component {
     }
   }
 
+  shouldComponentUpdate (nextProps, nextState) {
+    return !isEqual(nextState.expandedProp, this.state.expandedProp)
+  }
+
   render () {
     const { properties, styleVariation } = this.props
 
diff --git a/src/components/ContentContainer/ContentContainer.js b/src/components/ContentContainer/ContentContainer.js
index 2a31ce7..ec5123b 100644
--- a/src/components/ContentContainer/ContentContainer.js
+++ b/src/components/ContentContainer/ContentContainer.js
@@ -1,9 +1,9 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 
 import './ContentContainer.scss'
 
-export default class ContentContainer extends Component {
+export default class ContentContainer extends PureComponent {
   render () {
     return (
       <div className='content-container'>
diff --git a/src/components/CopyButton/CopyButton.js b/src/components/CopyButton/CopyButton.js
index 78cd3c2..a97657a 100644
--- a/src/components/CopyButton/CopyButton.js
+++ b/src/components/CopyButton/CopyButton.js
@@ -27,19 +27,13 @@ export default class CopyButton extends Component {
   }
 
   onClick (e) {
-    this.setState({
-      ...this.state,
-      tooltip: 'Copied'
-    })
+    this.setState({ tooltip: 'Copied' })
 
     this.props.onCopyClick(e)
   }
 
   onMouseOver (e) {
-    this.setState({
-      ...this.state,
-      tooltip: this.props.tooltip
-    })
+    this.setState({ tooltip: this.props.tooltip })
   }
 }
 
diff --git a/src/components/Description/Description.js b/src/components/Description/Description.js
index 0580efa..c9d6f34 100644
--- a/src/components/Description/Description.js
+++ b/src/components/Description/Description.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import classNames from 'classnames'
 import markdown from 'markdown-it'
 import PropTypes from 'prop-types'
@@ -6,7 +6,7 @@ import './Description.scss'
 
 const cm = markdown('commonmark')
 
-export default class Description extends Component {
+export default class Description extends PureComponent {
   render () {
     const { isInline, description } = this.props
     const text = {
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 49b4292..82fa07a 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -1,12 +1,13 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 
 import Description from '../Description/Description'
 import './Header.scss'
 
-export default class Header extends Component {
+export default class Header extends PureComponent {
   render () {
     const { title, description, version } = this.props
+
     return (
       <header id='header'>
         <h1>{title}</h1>
diff --git a/src/components/Indicator/Indicator.js b/src/components/Indicator/Indicator.js
index 0efd636..5f15e59 100644
--- a/src/components/Indicator/Indicator.js
+++ b/src/components/Indicator/Indicator.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 
@@ -6,7 +6,7 @@ import './Indicator.scss'
 
 const arrow = require('./arrow.png')
 
-export default class Indicator extends Component {
+export default class Indicator extends PureComponent {
   render () {
     const { status, className } = this.props
 
diff --git a/src/components/Method/Method.js b/src/components/Method/Method.js
index 88234c7..d821860 100644
--- a/src/components/Method/Method.js
+++ b/src/components/Method/Method.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import ScrollableAnchor from 'react-scrollable-anchor'
 
@@ -9,26 +9,16 @@ import Response from '../Response/Response'
 
 import './Method.scss'
 
-export default class Method extends Component {
-  constructor (props) {
-    super(props)
-
-    this.renderParameters = this.renderParameters.bind(this)
-    this.renderRequest = this.renderRequest.bind(this)
-    this.renderResponses = this.renderResponses.bind(this)
-  }
-
+export default class Method extends PureComponent {
   render () {
     const { method } = this.props
-    const parameters = method.parameters
-    const request = method.request
-    const responses = method.responses
+    const { summary, description, parameters, request, responses } = method
 
     return (
       <ScrollableAnchor id={method.link}>
         <div className='method'>
-          <h3>{method.summary}</h3>
-          {method.description && <Description description={method.description} />}
+          <h3>{summary}</h3>
+          {description && <Description description={description} />}
           {parameters && this.renderParameters(parameters)}
           {request && this.renderRequest(request)}
           {responses && this.renderResponses(responses)}
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
index 9c38e66..0608da3 100644
--- a/src/components/Navigation/Navigation.js
+++ b/src/components/Navigation/Navigation.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import isEqual from 'lodash/isEqual'
 
 import NavigationTag from '../NavigationTag/NavigationTag'
 
@@ -16,6 +17,13 @@ export default class Navigation extends Component {
     }
   }
 
+  shouldComponentUpdate (nextProps, nextState) {
+    const isHashDiff = this.props.location.hash !== nextProps.location.hash
+    const isTagsDiff = !isEqual(nextState.expandedTags, this.state.expandedTags)
+
+    return isHashDiff || isTagsDiff
+  }
+
   render () {
     const { navigation, location } = this.props
     const { expandedTags } = this.state
diff --git a/src/components/NavigationMethod/NavigationMethod.js b/src/components/NavigationMethod/NavigationMethod.js
index 32be6ca..d475f48 100644
--- a/src/components/NavigationMethod/NavigationMethod.js
+++ b/src/components/NavigationMethod/NavigationMethod.js
@@ -1,10 +1,10 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import './NavigationMethod.scss'
 
-export default class NavigationMethod extends Component {
+export default class NavigationMethod extends PureComponent {
   render () {
     const { method, isActive } = this.props
 
diff --git a/src/components/NavigationTag/NavigationTag.js b/src/components/NavigationTag/NavigationTag.js
index b8db900..a80e76b 100644
--- a/src/components/NavigationTag/NavigationTag.js
+++ b/src/components/NavigationTag/NavigationTag.js
@@ -13,6 +13,13 @@ export default class NavigationTag extends Component {
     this.handleClick = this.handleClick.bind(this)
   }
 
+  shouldComponentUpdate (nextProps, nextState) {
+    const isHashDiff = this.props.location.hash !== nextProps.location.hash
+    const isStatusDiff = this.props.status !== nextProps.status
+
+    return isHashDiff || isStatusDiff
+  }
+
   componentWillMount () {
     const { title, methods, location, onClick } = this.props
 
diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js
index 853b9bf..9f32a3e 100644
--- a/src/components/Page/Page.js
+++ b/src/components/Page/Page.js
@@ -13,11 +13,11 @@ export default class Page extends Component {
     const { definition, location } = this.props
 
     if (!definition) {
-      return ''
+      return null
     }
 
-    const navigation = definition.navigation
-    const services = definition.services
+    const { navigation, services } = definition
+
     return (
       <div className='page'>
         <Navigation navigation={navigation} location={location} />
@@ -28,14 +28,10 @@ export default class Page extends Component {
             version={definition.version}
           />
           <ContentContainer>
-            {services && services.map((service) => {
-              return (
-                <ServiceContainer
-                  key={service.title}
-                  service={service}
-                />
-              )
-            })}
+            {services && services.map(
+              (service) =>
+                <ServiceContainer key={service.title} service={service} />
+            )}
           </ContentContainer>
         </div>
       </div>
diff --git a/src/components/Property/Property.js b/src/components/Property/Property.js
index 1e11a19..22ef0ea 100644
--- a/src/components/Property/Property.js
+++ b/src/components/Property/Property.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 
@@ -8,7 +8,7 @@ import PropertyConstraints from '../PropertyConstraints/PropertyConstraints'
 
 import './Property.scss'
 
-export default class Property extends Component {
+export default class Property extends PureComponent {
   constructor (props) {
     super(props)
 
diff --git a/src/components/Response/Response.js b/src/components/Response/Response.js
index 4ca4dc3..4982c8b 100644
--- a/src/components/Response/Response.js
+++ b/src/components/Response/Response.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 
@@ -8,7 +8,7 @@ import Indicator from '../Indicator/Indicator'
 
 import './Response.scss'
 
-export default class Response extends Component {
+export default class Response extends PureComponent {
   constructor (props) {
     super(props)
 
diff --git a/src/components/ServiceContainer/ServiceContainer.js b/src/components/ServiceContainer/ServiceContainer.js
index ffb7bf2..25e7e61 100644
--- a/src/components/ServiceContainer/ServiceContainer.js
+++ b/src/components/ServiceContainer/ServiceContainer.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import ScrollableAnchor from 'react-scrollable-anchor'
 import PropTypes from 'prop-types'
 
@@ -6,11 +6,10 @@ import Method from '../Method/Method'
 
 // import './ServiceContainer.scss';
 
-export default class ServiceContainer extends Component {
+export default class ServiceContainer extends PureComponent {
   render () {
     const { service } = this.props
-    const methods = service.methods
-    const title = service.title
+    const { title, methods } = service
 
     return (
       <ScrollableAnchor id={title}>
diff --git a/yarn.lock b/yarn.lock
index dc20de3..92d2504 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4578,6 +4578,13 @@ react-addons-create-fragment@^15.5.4:
     loose-envify "^1.3.1"
     object-assign "^4.1.0"
 
+react-addons-perf@^15.4.2:
+  version "15.4.2"
+  resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-15.4.2.tgz#110bdcf5c459c4f77cb85ed634bcd3397536383b"
+  dependencies:
+    fbjs "^0.8.4"
+    object-assign "^4.1.0"
+
 react-document-title@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/react-document-title/-/react-document-title-2.0.3.tgz#bbf922a0d71412fc948245e4283b2412df70f2b9"

From a488e8549614c2e933746d2d952c3c5ba1e3515d Mon Sep 17 00:00:00 2001
From: Brendan Abbott <brendan.abbott@temando.com>
Date: Fri, 2 Jun 2017 00:23:46 +1000
Subject: [PATCH 2/2] ContentContainer is needs deep comparison

---
 src/components/ContentContainer/ContentContainer.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ContentContainer/ContentContainer.js b/src/components/ContentContainer/ContentContainer.js
index ec5123b..2a31ce7 100644
--- a/src/components/ContentContainer/ContentContainer.js
+++ b/src/components/ContentContainer/ContentContainer.js
@@ -1,9 +1,9 @@
-import React, { PureComponent } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
 import './ContentContainer.scss'
 
-export default class ContentContainer extends PureComponent {
+export default class ContentContainer extends Component {
   render () {
     return (
       <div className='content-container'>