Merge pull request temando#80 from brendo/pure-components

Migrate to pure components where possible

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

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'
     }

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,15 +12,17 @@ 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 = {
       expandedProp: []
     }
   }
 
+  shouldComponentUpdate (nextProps, nextState) {
+    return !isEqual(nextState.expandedProp, this.state.expandedProp)
+  }
+
   render () {
     const { properties, styleVariation } = this.props
 

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

src/components/Description/Description.js

@@ -1,12 +1,12 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import classNames from 'classnames'
 import markdown from 'markdown-it'
 import PropTypes from 'prop-types'
 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 = {

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>

src/components/Indicator/Indicator.js

@@ -1,12 +1,12 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 
 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
 

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

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

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
 

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
 

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>

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)
 

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)
 

src/components/ServiceContainer/ServiceContainer.js

@@ -1,16 +1,15 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import ScrollableAnchor from 'react-scrollable-anchor'
 import PropTypes from 'prop-types'
 
 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}>

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"