アロー関数について、恥ずかしながら今更気がついた仕様がありましたので、自戒の念を込めて記事化することにしました...

JSXを記載している時の話...

以下のコードを書いて保存すると、

{members.map((member, i) => <li key={i}>{member}</li>)}

↓ Prettier によって整形された

{members.map((member, i) => (
  <li key={i}>{member}</li>
))}

「...ん？」
アロー関数が改行されているのに {} ではなく、 ()とされている？
てっきり以下のような記載になると思っていた...（これでも動きます）

{members.map((member, i) => {
  return <li key={i}>{member}</li>;
})}

この記法について調査してみました。

アロー関数は()と{}で動きに違いあることがわかりました。
それぞれ以下の挙動になるようです。

アロー関数で()を使うと、内部に書かれた式が直接返り値となります。
明示的にreturnを書かずともその結果が返されます。

{members.map((member, i) => (
  <li key={i}>{member}</li>
))}

アロー関数で{}を使うと、内部で計算や複数のステートメントを実行できます。
結果を返すためには、return文が必要です。

{members.map((member, i) => {
  return <li key={i}>{member}</li>;
})}

@juner 様より有益なコメントいただきました
アロー関数の()は、空オブジェクト返したい時ケースでも用いることがあるそうです。

アロー関数での () は {} 空オブジェクト返したい時とかにもよく使いますね（強制的に式にできるので

const func = () => ({});

コメントありがとうございました！

以上です！
何方かのお役に立てたら嬉しいです🙏