ReactでonClick={() =>がわからない #JavaScript

Reactでこういうコードがありました。

<Chip
 label={"ラベル"}
 onClick={() => handleClick("ラベル")}
/>

それで、これが解せなかった。

onClick={() =>

結論、今の僕の認識では、ユーザーがブラウザでChipをクリックすると、

() => handleClick("ラベル")

これで定義したhandleClickが実行されるという認識において、

MDNのアロー関数に書いてある仕様とは違うのかな？と思いました。

アロー関数は学びました

【JavaScript】アロー関数式を学ぶついでにthisも復習する話

このqiitaで書かれれる、

3行でまとめ
・JavaScriptのES6でアロー関数式という、今までとは違った関数の書き方が追加された
・アロー関数式は既存の関数式より文字数が短くなるだけではなく、宣言時のthisを束縛して不変のものにするという効果を持っている
・ほとんどの場面ではアロー関数式を使うほうがわかりやすくなるが、thisを束縛されて困る場面もあるので要注意！

というところも納得しました。

これを読んだ後でも、所謂アロー関数式の説明では、 onClick={() => handleClick("ラベル")}の動きはよく理解できなかった。

自分で試して、

var arguments = [1, 2, 3];
var arr = () => arguments[0];

 // 1
console.log( arr() )

だとコンソールに1が出てくるけど、

var arguments = [1, 2, 3];

 // () => arguments[0]
console.log( () => arguments[0] )

これだとコンソールに() => arguments[0]が出てくるということを見ても、

ブラウザからのクリック動作がまさに、onClick={() => handleClick("ラベル")}で言うところの、関数実行()になるものと判断しました。

そして、これはこういうもので、アロー関数のイロハとは違うと認識しています。

間違ってたら詳しく教えてください٩( 'ω' )و