個別でstateを定義する

メリット
個々の値を扱いやすい。

デメリット
人によっては若干読みづらい？

const [todo, setTodo] = useState('');
const [date, setDate] = useState('');

まとめてstateを定義する

メリット
オブジェクトとして管理するから構造があってわかりやすい

デメリット
誤って、他の値を初期化してしまう可能性がある。

const [userInput, setUserInput] = useState({
  todo: '',
  date: ''
});

まとめて定義するときの注意点

１つの値だけ変えたい時には注意が必要。例えば、userInput.todoだけを変えたい時に、以下のようにしてしまうと、userInput.dateの値が消えてしまい、アクセスできなくなる。

setUserInput({
  todo: 'Updated!'
});

---

対処法①
以下のように、毎回スプレッド構文で全ての要素を戻してから、変えたい要素だけオーバーライドする。

setUserInput({
  ...userInput,
  todo: 'Updated!'
});

---

対処法②
useStateには関数を渡すことができて、引数はpreveStateになり戻り値は①と同じでオブジェクト。

①だと、他のsetState処理との順番がユーザーのinput処理の順番通りとは限らないが、こちらの方法を使えば、常に最新のデータにアクセスできるらしい。よって、こちらの方が安全とされている。

setUserinput((prevState) => {
  return {
    ...prevState,
    enteredTitle: event.tartget.value
  };
});