結論()にすることによってreturnを省略してコンポーネントを作成することができる。1行なら()もなし。その他大きな違いとしては{}の場合は中で変数定義したりなどできるが、()の場合はreturnと書かれた状態で始まるため変数定義などができない。例えば{}の場合だと

const hello = () => {
    const text = "Hello"
    return <h1>{text}</h1>
}

こんな感じでreturnまでは普通の関数の処理と変わらないので好きに定義が可能です。一方()で書くと上のような書き方はできないので、returnで返す戻り値のみを書くことしかできない。

メリットとしては処理させないみたいな制約をつけ、ただ表示するだけの簡単なコンポーネントを作成することができるのと若干記述量が減るくらいくらいな気がする。

あと普通にreturnを省略して書く場合でもpropsは取得できます。

const hello = ({text}) => (
    <h1>{text}</h1>
)

どちらもコンポーネントを作るという点では変わりないので、コンポーネントに何か処理をさせるなら{}、テキストやボタンだけ表示するだけのコンポーネントなら()みたいな感じで使っていけば良い

◀▷kame-Blog

関数定義の際の{}と()の使い分け