【React】アロー関数内で波括弧の省略どころがわからずハマった

アロー関数で処理部分が複数行になる場合は必ず波括弧を使用するものと認識していたのだが、なぜ関数①が動作するのかわからず試行錯誤した。

まず関数2に関してはそもそも波括弧を使用する場合はreturnを記述するという、基礎的な部分が抜け落ちていたことが原因であった。

また関数①でなぜ波括弧を省略できるのかについては、アロー関数自体が式であるためであった。式内部での処理が何行でも単一の式であることに変わりはないので、波括弧を省略できた。

参考：Reactにおける波括弧の省略に関して

App.js

// 関数①
setTodos((prevTodos) =>
  prevTodos.map((todo) =>
    todo.id === id ? { ...todo, completed: !todo.completed } : todo
  )
);

// 関数②
// エラー：Expected an assignment or function call and instead saw an expression
setTodos((prevTodos) => {
  prevTodos.map((todo) => {
    todo.id === id ? { ...todo, completed: !todo.completed } : todo;
  });
});

// こうしたらエラーは発生せず
setTodos((prevTodos) => {
  return prevTodos.map((todo) => {
    return todo.id === id ? { ...todo, completed: !todo.completed } : todo;
  });
});