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/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 (