const onClick = (event) => {
setState1(event.target.value)
}
useEffect(() => {
setState2(state1 + 1)
}, [state1])
にせず
const onClick = (event) => {
setState1(event.target.value)
setState2(event.target.value + 1)
}
(この例だと +1 するだけなので state にする必要ないし 処理が重たくても state1 から計算できるなら useMemo でいいけど これは説明を簡単にするためのものなのでそこは気にしないでください)
しかし 更新方法が setState の関数を使うタイプの場合に困りました
const onClick = useCallback((event) => {
setState1(prev => prev + 1)
// state1 の更新後の値がここではわからないので state2 を更新できない
}, [])
useEffect(() => {
// 仕方ないので再レンダリング時の useEffect で対処
setState2(state1 + 1)
}, [state1])
setState の関数の中で別の setState を呼び出すこともできますが なんか気持ち悪さがありますし それってどうなのと思います
そんな使い方を見た覚えもないですし 推奨される方法ではない気がします
完全に state1 と state2 の更新タイミングが揃うものならオブジェクトにまとめて 1 つの state にしてもいいのですが そうとも限らないです
それに state2 の更新としてるところが localStorage への書き込みだったり React の state とは関係ない処理の場合もありますし