React18のAuto Batchingの確認

React18の非同期実行時に明示的にレンダリングを行いたい場合はflushSyncを使う。 補足として、StrictModeを使うとReactElementの作成が複数回起きてしまう点には注意。 確認方法 React18とReact17で確認できるコードを用意した。 内容はこんな感じ(JSXの部分は省略) const handleClick = () => { setA((a) => a + 1); setB((b) => b + 2); // React17でも1度だけ。 }; // 別のボタンから呼び出す。setTimeoutを使っている。 const handleAsyncClick = () => { setTimeout(() => { setA((a) => a + 1); // React17だとここでレンダリングが発生してしまう setB((b) => b + 2); }