reactのコンポーネントの関数になぜアロー関数を使うのか？

reactでコンポーネントを呼び出す際に、プロパティにstate変数などのハンドル関数を実装する時がある。

export default function Example() {
const [value, setValue] = useState(null);

const handle(value) => {
    console.log('value: ', value);
    setValue(value);
}
return (
    <Example value="value" onClick={handle('hoge')}>
);

}

上記だとExampleコンポーネントのレンダーの一部としてhandle()が即時実行されてしまいます。
これにより、setValueが実行された後に再度レンダーされ、無限ループになってしまいます。

上記のような無限ループを防ぐためには、以下のように即時実行関数を呼ぶのではなく、propsとして関数を渡す方式を取ります。（このためにアロー関数を使います）

export default function Example() {
const [value, setValue] = useState(null);

const handle(value) => {
    console.log('value: ', value);
    setValue(value);
}
return (
    <Example value="value" onClick={()=>handle('hoge')}>
);

}