Add shouldComponentUpdate to response.jsx and live-response.jsx. Remove isShownKey from shouldComponentUpdate of OperationContainer. Moved response and request out to separate props for operation.jsx. Removed unused request prop from responses.jsx.

src/core/components/live-response.jsx

@@ -1,6 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
+import { Iterable } from "immutable"
 
 const Headers = ( { headers } )=>{
   return (
@@ -28,15 +29,24 @@ Duration.propTypes = {
 
 export default class LiveResponse extends React.Component {
   static propTypes = {
-    response: PropTypes.object.isRequired,
+    response: PropTypes.instanceOf(Iterable).isRequired,
-    specSelectors: PropTypes.object.isRequired,
     path: PropTypes.string.isRequired,
     method: PropTypes.string.isRequired,
-    getComponent: PropTypes.func.isRequired,
     displayRequestDuration: PropTypes.bool.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
     getConfigs: PropTypes.func.isRequired
   }
 
+  shouldComponentUpdate(nextProps) {
+    // BUG: props.response is always coming back as a new Immutable instance
+    // same issue as responses.jsx (tryItOutResponse)
+    return this.props.response !== nextProps.response
+      || this.props.path !== nextProps.path
+      || this.props.method !== nextProps.method
+      || this.props.displayRequestDuration !== nextProps.displayRequestDuration
+  }
+
   render() {
     const { response, getComponent, getConfigs, displayRequestDuration, specSelectors, path, method } = this.props
     const { showMutatedRequest } = getConfigs()
@@ -112,7 +122,6 @@ export default class LiveResponse extends React.Component {
 
   static propTypes = {
     getComponent: PropTypes.func.isRequired,
-    request: ImPropTypes.map,
     response: ImPropTypes.map
   }
 }

src/core/components/operation.jsx

@@ -6,6 +6,8 @@ import { Iterable } from "immutable"
 export default class Operation extends PureComponent {
   static propTypes = {
     operation: PropTypes.instanceOf(Iterable).isRequired,
+    response: PropTypes.instanceOf(Iterable),
+    request: PropTypes.instanceOf(Iterable),
 
     toggleShown: PropTypes.func.isRequired,
     onTryoutClick: PropTypes.func.isRequired,
@@ -24,19 +26,21 @@ export default class Operation extends PureComponent {
   }
 
   static defaultProps = {
-    showSummary: true,
+    operation: null,
     response: null,
-    allowTryItOut: true,
+    request: null
-    displayOperationId: false,
-    displayRequestDuration: false
   }
 
   shouldComponentUpdate(nextProps) {
     return this.props.operation !== nextProps.operation
+      || this.props.response !== nextProps.response
+      || this.props.request !== nextProps.request
   }
 
   render() {
     let {
+      response,
+      request,
       toggleShown,
       onTryoutClick,
       onCancelClick,
@@ -67,8 +71,6 @@ export default class Operation extends PureComponent {
       tryItOutEnabled,
       executeInProgress
     } = operationProps.toJS()
-    let response = operationProps.get("response")
-    let request = operationProps.get("request")
 
     let {
       summary,

src/core/components/response.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { fromJS, Seq } from "immutable"
+import { fromJS, Seq, Iterable } from "immutable"
 import { getSampleSchema } from "core/utils"
 
 const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
@@ -41,7 +41,7 @@ export default class Response extends React.Component {
 
   static propTypes = {
     code: PropTypes.string.isRequired,
-    response: PropTypes.object,
+    response: PropTypes.instanceOf(Iterable),
     className: PropTypes.string,
     getComponent: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
@@ -53,6 +53,12 @@ export default class Response extends React.Component {
     response: fromJS({}),
   };
 
+  shouldComponentUpdate(nextProps) {
+    return this.props.code !== nextProps.code
+      || this.props.response !== nextProps.response
+      || this.props.className !== nextProps.className
+  }
+
   render() {
     let {
       code,

src/core/components/responses.jsx

@@ -5,7 +5,6 @@ import { defaultStatusCode } from "core/utils"
 
 export default class Responses extends React.Component {
   static propTypes = {
-    request: PropTypes.instanceOf(Iterable),
     tryItOutResponse: PropTypes.instanceOf(Iterable),
     responses: PropTypes.instanceOf(Iterable).isRequired,
     produces: PropTypes.instanceOf(Iterable),
@@ -21,33 +20,27 @@ export default class Responses extends React.Component {
   }
 
   static defaultProps = {
-    request: null,
     tryItOutResponse: null,
     produces: fromJS(["application/json"]),
     displayRequestDuration: false
   }
 
   shouldComponentUpdate(nextProps) {
-    console.log("Responses SCU", this.props.tryItOutResponse.toJS(), nextProps.tryItOutResponse.toJS())
+    // BUG: props.tryItOutResponse is always coming back as a new Immutable instance
-    let render = this.props.request !== nextProps.request
+    let render = this.props.tryItOutResponse !== nextProps.tryItOutResponse 
-    || this.props.tryItOutResponse !== nextProps.tryItOutResponse
     || this.props.responses !== nextProps.responses
     || this.props.produces !== nextProps.produces
     || this.props.producesValue !== nextProps.producesValue
     || this.props.displayRequestDuration !== nextProps.displayRequestDuration
     || this.props.path !== nextProps.path
     || this.props.method !== nextProps.method
-
-    console.log("render", render)
-
     return render
   }
 
   onChangeProducesWrapper = ( val ) => this.props.specActions.changeProducesValue([this.props.path, this.props.method], val)
 
   render() {
-    console.log("Responses render")
+    let { responses, tryItOutResponse, getComponent, getConfigs, specSelectors, fn, producesValue, displayRequestDuration } = this.props
-    let { responses, request, tryItOutResponse, getComponent, getConfigs, specSelectors, fn, producesValue, displayRequestDuration } = this.props
     let defaultCode = defaultStatusCode( responses )
 
     const ContentType = getComponent( "contentType" )
@@ -72,8 +65,7 @@ export default class Responses extends React.Component {
           {
             !tryItOutResponse ? null
                               : <div>
-                                  <LiveResponse request={ request }
+                                  <LiveResponse response={ tryItOutResponse }
-                                                response={ tryItOutResponse }
                                                 getComponent={ getComponent }
                                                 getConfigs={ getConfigs }
                                                 specSelectors={ specSelectors }

src/core/containers/OperationContainer.jsx

@@ -98,7 +98,7 @@ export default class OperationContainer extends PureComponent {
   }
   
   shouldComponentUpdate(nextProps, nextState) {
-    return this.state.tryItOutEnabled !== nextState.tryItOutEnabled
+    const render = this.state.tryItOutEnabled !== nextState.tryItOutEnabled
       || this.state.executeInProgress !== nextState.executeInProgress
       || this.props.op !== nextProps.op
       || this.props.tag !== nextProps.tag
@@ -107,7 +107,6 @@ export default class OperationContainer extends PureComponent {
       || this.props.operationId !== nextProps.operationId
       || this.props.showSummary !== nextProps.showSummary
       || this.props.isShown !== nextProps.isShown
-      || this.props.isShownKey !== nextProps.isShownKey
       || this.props.jumpToKey !== nextProps.jumpToKey
       || this.props.allowTryItOut !== nextProps.allowTryItOut
       || this.props.displayOperationId !== nextProps.displayOperationId
@@ -115,6 +114,7 @@ export default class OperationContainer extends PureComponent {
       || this.props.response !== nextProps.response
       || this.props.request !== nextProps.request
       || this.props.isDeepLinkingEnabled !== nextProps.isDeepLinkingEnabled
+      return render
   }
 
   toggleShown =() => {
@@ -177,7 +177,6 @@ export default class OperationContainer extends PureComponent {
       isShownKey,
       jumpToKey,
       allowTryItOut,
-      response,
       request,
       displayOperationId,
       displayRequestDuration,
@@ -189,6 +188,8 @@ export default class OperationContainer extends PureComponent {
     return (
       <Operation
         operation={operationProps}
+        response={response}
+        request={request}
 
         toggleShown={this.toggleShown}
         onTryoutClick={this.onTryoutClick}