メインコンテンツへスキップ

batch()

batch((fn: () => void))

v7.0.0 で追加

情報

React 18 を使用している場合は、batch API を使用する必要はありません。React 18 はすべて（どこでキューに登録されても）の状態更新を自動的に一度のレンダリングパスにバッチ処理します。

React の unstable_batchedUpdates() API を使用すると、イベントループのティック内で React のアップデートをすべて 1 回のレンダリングパスにバッチ処理できます。React は、すでにこれをイベントハンドラコールバック用に内部で使用しています。この API は、React コアそのものではなく、実際には ReactDOM や React Native などのレンダラパッケージの一部です。

React-Redux は ReactDOM と React Native の両方の環境で動作する必要があるため、ビルド時にこの API を正しいレンダラからインポートして独自に使用できるようにしました。また、この関数自体を公開し直して、batch() に名前を変更しました。これを用いて、React 外部でディスパッチされた複数のアクションを 1 回のレンダリングアップデートにのみ反映させることができます。以下のように行います。

import { batch } from 'react-redux'

function myThunk() {
  return (dispatch, getState) => {
    // should only result in one combined re-render, not two
    batch(() => {
      dispatch(increment())
      dispatch(increment())
    })
  }
}

リファレンス​