ReactのStateの更新について

Question

実現したいこと

• TypeScript & Reactでstateの値を更新する。

前提

お世話になっております。現在Typescript勉強中です。

以下のinputを更新した際にstateの値を更新する処理を実装したいと考えています。
実装したコードでわからない点があったのでご教授いただけないでしょうか？

発生している問題・エラーメッセージ

このコードで// XXXの記載がある処理がよくわかりません。
testStateの値を更新する場合、setTestStateを呼び出す必要があると認識していましたが、直接testStateに値を代入しても意図通りの挙動になっているように思います。なぜ意図通りの動きをするのか教えていただけないでしょうか？

該当のソースコード

function Test () {
  let [testState, setTestState] = useState([
    {
      name: "test1"
    },
    {
      name: "test2",
    }
  ]);

  return (
    <div>
      <input 
        type="text"
        defaultValue={testState[0].name}
        id='input0'
        onChange={(event) => {
          // setTestStateを呼び出して値を更新
          let tmp = testState;
          tmp[0].name = event.target.value;
          setTestState(tmp)
        }}
      />
      <input 
        type="text"
        defaultValue={testState[1].name}
        id='input1'
        onChange={(event) => {
          // XXX: setTestStateを呼ばなくても値の更新ができる？？？
          testState[1].name = event.target.value
        }}
      />
      <input type='button' onClick={() => {
        console.log(testState)
      }} value="testbutton" />
    </div>
  )
}

試したこと

補足情報（FW/ツールのバージョンなど）

Answer 1

なぜ意図通りの動きをするのか教えていただけないでしょうか？

運が良かっただけです。Reactのバージョンアップや、他の箇所で書き方を変えたことで動かなくなっても文句は言えません。

Comments

[maisumakun]

> testStateの値を更新する場合、setTestStateを呼び出す必要があると認識していましたが

そのとおりです。このようなやり方で動くことは保証されていません。

[退会済みユーザー]

回答ありがとうございます。やはりsetTestStateを呼び出すのが正しいやり方なのですね。