[解決済み】useEffectフックの中で状態を設定することは可能か？

質問

ある状態があり、それが他の状態に依存しているとします（例えば、Aが変化したとき、Bを変化させたい）。

useEffectフックの中に、Aを観測してBを設定するフックを作るのは適切でしょうか？

ボタンをクリックすると、次のレンダリングの前に、最初の効果が発火してbが変化し、2番目の効果が発火するように、効果がカスケードするのでしょうか。このようなコードの構造化には、パフォーマンス上のデメリットがありますか？

let MyComponent = props => {
  let [a, setA] = useState(1)
  let [b, setB] = useState(2)
  useEffect(
    () => {
      if (/*some stuff is true*/) {
        setB(3)
      }
    },
    [a],
  )
  useEffect(
    () => {
      // do some stuff
    },
    [b],
  )

  return (
    <button
      onClick={() => {
        setA(5)
      }}
    >
      click me
    </button>
  )
}

解決方法は？

あるエフェクトの内部でsetStateしても、エフェクトは常にレンダリングフェーズ終了後に実行され、別のエフェクトは更新された状態を読み取り、レンダリングフェーズ終了後にそれに対するアクションを実行します。

とは言うものの、次のような可能性がない限り、同じエフェクトで両方のアクションを取る方が良いでしょう。 b 以外の理由で変更されることがあります。 changing a この場合にも、同じロジックを実行することになります。