Why does using an arrow function prevent page reloading issues in React Class Components?

Question

I've been working on a bug that caused the page to rerender its contents every time my modal was closed. However, I managed to fix it, by placing the regular function inside an arrow function as seen below.

   onClose={() => { toggleModal() }}

Before the fix, the function was just

 onClose={toggleModal}

In my component I'm using componentWillRecieveProps to set state, which I believe is the cause of the rerendering issue.

  public componentWillReceiveProps (nextProps: any) {
    if (this.props !== nextProps) {
      this.setUrl(nextProps);
    }
  }

Within the modal component, there are also fields and checkboxes that update my graphQL data using apollo.

I'm assuming my solution works because an arrow function lexically scopes the this keyword to the window global object, which cannot be modified. Would love a clearer explanation of why this works however.