主な変更点
- automatic batching(三分しかないのでこれだけ説明します)
- startTransition
- new streaming server renderer
- createRoot
- etc..?
「複数回のstate更新によるUIの再描画を1回に抑えること」
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
setCount(c => c + 1); // Does not re-render yet
setFlag(f => !f); // Does not re-render yet
// React will only re-render once at the end (that's batching!)
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
</div>
);
}
毎回state更新->UI再描画するより一度にやった方がパフォーマンスがいい
非同期処理など、直接Reactのイベントハンドラーに紐づかない処理の中で複数回stateを更新する場合、このbatchingが動かない。
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
fetchSomething().then(() => {
// React 17 and earlier does NOT batch these because
// they run *after* the event in a callback, not *during* it
setCount(c => c + 1); // Causes a re-render
setFlag(f => !f); // Causes a re-render
});
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
</div>
);
}
React v18以降、上記のようないままでbatchingが動かなかった場合でも動くようになる:tada:(※)。 これをautomatic batchingと呼ぶ。
※ React v18で追加されるReactDOM.createRootとというAPIを用いてDOMにアタッチしないといけない
ちなみにautomatic batchingだが、現行バージョンでも以下のreact-domのAPIを使用すれば使えたりする。
import { unstable_batchedUpdates } from 'react-dom';
https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html