Type Script で onClick={function()}がダメな理由

Type Scriptを書いていて、疑問だった箇所の忘備録

しがちなミス

export const funcA = () => {
    console.log('test')
}

// この呼び出しはエラーになる
<Button 
    onClick={funcA()}
/>

OKな呼び出し

export const funcA = () => {
    console.log('test')
}

<Button 
    onClick={funcA}
/>

<Button 
    onClick={() => funcA()}
/>

違い

function()

と記載した場合、単純な関数の呼び出し（即時関数）となってしまうため、関数そのものではなく関数の結果（関数の戻り値）がonClickに設定されてしまう。
よって、動かなかったりエラーとなる

下記二つは、関数自体をonClickに渡せている。
アロー関数もOK

export const funcA = () => {
    console.log('test')
}

<Button 
    onClick={funcA}
/>

<Button 
    onClick={() => funcA()}
/>

単純なことで、lintエラーが出る際なんとなく修正していましたが、ちゃんと理由がわかり納得でした。
普段から、ただ書けるのではなく理解するまで、を心がけないとなぁと反省です。