title: Why do we add " ( ) => " before a function reference?
body: <p>I am learning typescript and was trying to implement a <a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist" rel="nofollow noreferrer">detailList</a> component from Microsoft Fluent UI, but I ran into some trouble:</p>
  <pre><code>Type '(ev: React.MouseEvent&lt;HTMLElement&gt;, checked: boolean) =&gt; void' is not assignable to type '(event: MouseEvent&lt;HTMLElement, MouseEvent&gt;, checked?: boolean | undefined) =&gt; void'.
  </code></pre>
  <p>In the code there was a function called _onChangeCompactMode being referenced when a toggle button is clicked</p>
  <pre><code>  private _onChangeCompactMode = (ev: React.MouseEvent&lt;HTMLElement&gt;, checked: boolean): void =&gt; {
  this.setState({ isCompactMode: checked });
  </code></pre>
  <p>Here is where it's referenced:</p>
  <pre><code>  &lt;Fabric&gt;
      &lt;div className={classNames.controlWrapper}&gt;
        &lt;Toggle
          label=&quot;Enable compact mode&quot;
          checked={isCompactMode}
          onChange={this._onChangeCompactMode}
          onText=&quot;Compact&quot;
          offText=&quot;Normal&quot;
          styles={controlStyles}
        /&gt;
         ...
    &lt;/Fabric&gt;
  </code></pre>
  <p>I fixed this issue by changing this line <code>onChange={this._onChangeCompactMode}</code> to this <code>onChange={() =&gt; this._onChangeCompactMode}</code></p>
  <p>I am not sure why this made it work. My understanding is, I passed a function reference. But why wouldn't it work as it is without <code>() =&gt;</code></p>
  <p>Still new here, so constructive feedback is welcomed.</p>