title: Prevent re-render on a PureComponent when passing an object
body: <p>When using <a href="https://reactjs.org/docs/react-api.html#reactpurecomponent" rel="nofollow noreferrer">PureComponents</a> you have the advantage over functional components that the component is not always rendered when the parent updates. It actually only renders when there is a change in the component props, which in this example is only when you change the input.</p>
  
  <p><strong>How could you pass an object to the PureComponent without it breaking all the advantage of using this kind of component?</strong></p>
  
  <p><strong>Does this mean that as soon as you have a prop that you expect it to be of type object, it's better to just make your component functional?</strong></p>
  
  <p>I added an example to illustrate what I mean... (Probably you need to open it in a new window, as there are a lot of different children)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class TestPureComponent extends React.PureComponent {
    render() {
      return &lt;div style={{border: '1px solid black'}}&gt;{this.props.text} : {this.props.inputValue} {Math.random()} &lt;button onClick={() =&gt; {this.props.dismissClicked()}}&gt;Click me&lt;/button&gt;  &lt;/div&gt;
    }
  }
  
  function TestFunctionalComponent () {
    return &lt;div style={{border: '1px solid black'}}&gt;I always update as I am a functional component {Math.random()}&lt;/div&gt;
  }
  
  const hell = () =&gt; {console.log('Logs hello')}
  
  class RenderExample extends React.Component {
    constructor (props) {
      super(props)
      this.state = {clicked: false, inputValue: 'inputValue'}
      this.onClick = this.onClick.bind(this)
      this.doSomething = this.doSomething.bind(this)
    }
  
    onClick () {
      this.setState({clicked: !this.state.clicked})
    }
    
    doSomething () {
      console.log('helllllo')
    }
    
    heee = () =&gt; {
      console.log('heeeee')
    }
  
    render () {
      return &lt;div&gt;
        &lt;button onClick={this.onClick}&gt;
          Update state (forces re-render) {this.state.clicked &amp;&amp; 'clicked'}
        &lt;/button&gt;
        &lt;input onChange={(e) =&gt; this.setState({inputValue: e.target.value})} type="text" value={this.state.inputValue}/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;TestFunctionalComponent /&gt;
        &lt;br/&gt;
        &lt;TestPureComponent dismissClicked={() =&gt; hell} inputValue={this.state.inputValue} text="If you click the button this will re-render, if you change the input this will re-render"/&gt;
        &lt;br/&gt;
        &lt;TestPureComponent text="If you click the button this will NOT re-render, if you change the input this will re-render" dismissClicked={this.doSomething} inputValue={this.state.inputValue}/&gt;
        &lt;br/&gt;
        &lt;TestPureComponent text="If you click the button this will NOT re-render, if you change the input this will re-render" dismissClicked={this.heee} inputValue={this.state.inputValue}/&gt;
        &lt;br/&gt;
        &lt;TestPureComponent text="If you click the button this will NOT re-render, if you change the input this will re-render" dismissClicked={hell} inputValue={this.state.inputValue}/&gt;
        &lt;br/&gt;
        &lt;TestPureComponent text="If you click the button this will NOT re-render, if you change the input this will re-render" dismissClicked={hell} inputValue={this.state.inputValue}/&gt;
        &lt;br/&gt;&lt;br/&gt;
        &lt;div&gt; we will now add an inline object to each component and now they all update&lt;/div&gt;
        
        &lt;TestPureComponent dismissClicked={() =&gt; hell} inlineOBJ={{hello: 'world'}} inputValue={this.state.inputValue} text="If you click the button this will re-render, if you change the input this will re-render"/&gt;
        &lt;br/&gt;
        &lt;TestPureComponent text="If you click the button this will re-render, if you change the input this will re-render" inlineOBJ={{hello: 'world'}} dismissClicked={this.doSomething} inputValue={this.state.inputValue}/&gt;
        &lt;br/&gt;
        &lt;TestPureComponent text="If you click the button this will re-render, if you change the input this will re-render" inlineOBJ={{hello: 'world'}} dismissClicked={this.heee} inputValue={this.state.inputValue}/&gt;
        &lt;br/&gt;
        &lt;TestPureComponent text="If you click the button this will re-render, if you change the input this will re-render" inlineOBJ={{hello: 'world'}} dismissClicked={hell} inputValue={this.state.inputValue}/&gt;
        &lt;br/&gt;
        &lt;TestPureComponent text="If you click the button this will re-render, if you change the input this will re-render" inlineOBJ={{hello: 'world'}} dismissClicked={hell} inputValue={this.state.inputValue}/&gt;
      &lt;/div&gt;
    }
  }
  
  ReactDOM.render(&lt;RenderExample /&gt;, document.getElementById('root'))</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I want is to see if there is a way to have a PureComponent, that wouldn't ALWAYS update when there is an OBJECT passed in as a prop.</p>