React Redux の過剰なコンポーネントアップデートを抑制する方法一覧 #React

React Reduxで作業をしていると、過剰にコンポーネントがアップデートされるシーンがでてくるかもしれません。

アップデート抑制方法は色々ありますが、違いが分かりにくかったため
今回は比較リストを作成しました。

コンポーネントのアップデート抑制方法一覧

※ React Reduxのみで実装可能な抑制方法一覧です。

class component で制御する場合

名前	比較方法	概要
pure component	*shallow equal	Propsに変更がなければ component をアップデートしない
shouldComponentUpdate	手動設定	shouldComponentUpdate関数で、返り値が false の場合 component をアップデートしない

container component で制御する場合

名前	比較方法	概要
areStatesEqual	strictly equal	Stateに変更がなければ対象のpresentational コンポーネントを呼ばない
areOwnPropsEqual	*shallow equal	mapStateToProps と dispatchStateToProps と mergeProps 以外に渡される Propsに変更がなければ対象の presentational component を呼ばない
areStatePropsEqual	*shallow equal	mapStateToPropsで渡される値に変更がなければ対象の presentational component を呼ばない
areMergedPropsEqual	*shallow equal	mergePropsで渡される値に変更がなければ対象の presentational component を呼ばない

*shallow equal について

２つのオブジェクトのキーを１つづつ処理し、値を比較していきます。
値が object, function だった場合は厳密な比較ができず、常に違うものと認識されるため注意

アップデート抑制方法

pure component

内部的に Props全てに対し shouldComponentUpdate で比較をしてくれる。
function, objectについては一見同じように見えても === で false となるため注意が必要。

特徴

class component で使用可能
渡される全てのPropsを比較
shallow equal のため function, objectがPropsに入っていると正確な比較ができない

記述例


export class HogeComponent extends React.PureComponent {
    // contents
}

shouldComponentUpdate

class componentで制御する際、pure component ではアップデート抑制できない時使います。
その際、比較項目が多くなってしまう時は、Container componentでの制御も考えたほうが良いこともあります。

特徴

PropsやStateを使用することができ、自由度の高い設定ができる
class component で使用可能

記述例


export class HogeComponent extends React.Component {
    public shouldComponentUpdate(nextProps, nextState) {
        return (
          this.props.name !== nextProps.name ||
          this.state.number !== nextState.number
        )
    }
    // contents
}

areStatesEqual

object 同士の比較も可能で現在のstateと次のstateの比較もできます。
stateが変更されたらコンポーネントもアップデートしたい時に最適です。

特徴

object の比較が可能
そのため複雑で大きなStateも比較できる
connect関数の第4引数のoptionで設定
container component で使用される

記述例

connect(
  mapStateToProps,
  mapDispatchToProps,
  null,
  {
    areStatesEqual(next, prev) {
      return next.state === prev.state
    }
  }
)(HogeComponent)

areOwnPropsEqual

presentational component に直接渡されるPropsのみを精査します。
mapStateToProps と mapDispatchToProps と mergeProps で渡される項目は対象外です。

特徴

mapStateToPropsとmapDispatchToPropsとmergeProps 以外に渡す値を比較
connect関数の第4引数のoptionで設定
container component で使用される
比較内容にfunction, object がある場合はそれらを避けるように比較する必要がある

記述例


connect(
  mapStateToProps,
  mapDispatchToProps,
  null,
  {
    areOwnPropsEqual(next, prev) {
      return next === prev
    }
  }
)(HogeComponent)

areStatePropsEqual

特徴

mapStateToPropsの値を比較
connect関数の第4引数のoptionで設定
container component で主に使用
shallow equal なので function, object がある場合はそれらを避けるように比較する必要がある

記述例


connect(
  mapStateToProps,
  mapDispatchToProps,
  null,
  {
    areStatePropsEqual(next, prev) {
      return next === prev
    }
  }
)(HogeComponent)

areMergedPropsEqual

特徴

mergePropsで渡している値を比較
connect関数の第4引数のoptionで設定
container component で主に使用
shallow equal なので function, object がある場合はそれらを避けるように比較する必要がある

記述例


connect(
  state => state,
  dispatch => ({ dispatch }),
  mergeProps,
  {
    areMergedPropsEqual(next, prev) {
      return next === prev
    }
  }
)(HogeComponent)

あとがき

プラグインに頼らないアップデート抑制方法としてこちらを挙げました。

ご指摘箇所あればすぐ直しますのでコメントくださいませ。

最後までお読み頂きありがとうございました。

React Redux の 過剰なコンポーネントアップデートを抑制する方法一覧