ReactのsetStateの注意点

将来的な非同期レンダリングのため、setState内ではstateを読み込まない。

その代わりsetStateの第一引数に関数を指定するとその関数内で現在の値を取得できるため、それを利用する。

// stateがリテラルの場合
import { useState } from 'react';
const [stateCount, setStateCount] = useState(0);

<button type="button" onClick={() => setStateCount(beforeCount => beforeCount++)}>インクリメント</button>

// stateがオブジェクトの場合は関数でないとキーの一部を変更する処理ができない
import { useState } from 'react';
const [stateItem, setStateItem] = React.useState({title: 'hoge', text: 'hoge'});

const onChangeText = e => {
  const text = e.target.value;
  setStateItem(oldState => ({...oldState, text}));
}

<input type="text" value={stateItem.text} onChange={ onChangeText } />