title: why <button onClick={this.props.onClick}> is different from <button onClick={(e) => {this.props.onClick(e)}}> here?
body: <p>I found the following code in this <a href="https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578" rel="nofollow noreferrer">post</a>.(<a href="https://codesandbox.io/s/v38y6zk8ml" rel="nofollow noreferrer">sandbox</a>) I am not sure why these buttons behave differently. </p>
  
  <p>One possible explanation is: Because Button's render method is not invoked for updating, the first button's click handler remains the same. However, this.props of the Button instance has changed to include the new onClick prop. In other words,if the props of a <strong><em>component element</em></strong> is changed, <strong><em>nextProps</em></strong> will finally become <strong><em>this.props</em></strong> even when <strong><em>shouldComponentUpdate</em></strong> returns false.</p>
  
  <pre><code>const submit = val =&gt; alert(val);
  class App extends React.Component {
  
  
  state = { val: "one" }
  
    componentDidMount() {
      this.setState({ val: "two" })
    }
  
    render() {
      return &lt;Form value={this.state.val} /&gt;
    }
  }
  
  const Form = props =&gt; (
    &lt;Button
      onClick={() =&gt; {
        submit(props.value)
      }}
    /&gt;
  )
  
  class Button extends React.Component {
    shouldComponentUpdate() {
      // lets pretend like we compared everything but functions
      return false
    }
  
    handleClick = () =&gt; this.props.onClick()
  
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.props.onClick}&gt;This one is stale&lt;/button&gt;
          &lt;button onClick={() =&gt; this.props.onClick()}&gt;This one works&lt;/button&gt;
          &lt;button onClick={this.handleClick}&gt;This one works too&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>