title: React: Why does not passing parameters to handlers work?
body: <p>There's something i've discovered recently but i'm not sure why it does work. I used to do this when making react components:</p>
  
  <pre><code>class App extends React.Component {
    state = {
      input: ''
    }
  
    onChangeHandler = event =&gt; {
      this.setState({input: event.target.value});
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
          &lt;input value={this.state.input} onChange={(event) =&gt; this.onChangeHandler(event)} /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I understand this is creating a new function each time it re-renders. So I remember reading somewhere that this also worked:</p>
  
  <pre><code>class App extends React.Component {
      state = {
        input: ''
      }
  
    onChangeHandler = event =&gt; {
      this.setState({ input: event.target.value });
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
          &lt;input value={this.state.input} onChange={this.onChangeHandler} /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I'm using the latter now since it doesn't create a new function for each re-render. The thing is, how does that work? How is the event getting to the handler if i'm not passing it as a parameter in the onChange prop in the input tag? I'm just passing the reference.</p>
  
  <p>Sorry if this has been asked, I've had no luck searching for an answer.</p>
  
  <p>Thanks!</p>