Help us understand the problem. What is going on with this article?

React + Reduxでアプリを作るときのパフォーマンスチューニングどうするか問題

More than 1 year has passed since last update.

初めに

  • 説明下手です
  • なんだその実装は的なものがあるかもしれません
  • ガチ勢からの突っ込み待ってます

PureComponentは有効なのか

v15.3にてshallowな比較を行うPureComponentが追加されました。
自分のプロダクトでもさっそく使用し、ログインにかかる時間を計測してみましたが、

Component 717.5300000000007 ミリ秒
PureComponent 876.8950000000004 ミリ秒

Componentに比べ微増という結果になりました。
その他、PureComponentを使用したことによる表示に関する不具合も発生したため、
結果PureComponentの使用を諦めることにしました。

お前の実装がク〇だから速度出ないんだよ!という突っ込みもあるかと思いますが、
コーディングスキルが均一でない現場で、
確実な効果が出るか分からないものを使うのは気が引けたのでこのような判断をしました。

shouldComponentUpdateのチューニング

import deepEqual from 'fast-deep-equal'

export default class ReactComponent extends Component {
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return !deepEqual(this.props, nextProps) || !deepEqual(this.state, nextState)
  }

参考:http://sssslide.com/speakerdeck.com/masashi/spawopahuomansutiyuningusitahua

これが理想でしたが、当方でこれをやったところ動かなくなる事件が多発し断念
開発の途中でチューニングコードを入れたのがまずかったので、
最初からチューニングコードありきで動くものを作る。

それ本当にReduxに乗せる必要ある?問題

Actionがdispatchされると、Storeに登録されているReducerすべての関数が実行されます。
100個Reducerが登録されていれば100個のswitch文がブン回っているわけです。
この処理は削れるなら削っておきたいです。
APIの取得結果を複数の画面で使用する場合ではReduxの仕組みは有効だと思います。
しかし、例えば1か所で1回しか使わないデータをStoreにずっと持っておいたり、
どう考えても関係ないReducerに渡ったりするのは無駄に感じます。
そこでAPIの結果をdispatchせずにactionでreturnしてしまうという実装を割とやっています。

// HogeAction
export function getData(param) {
  return async dispatch => {
    const result = await callAPI(param);

    // dispatchしない
    /*
    dispatch({
      type: REDUX_GET_DATA,
      result
    })
    */

    return result
  }
}

// React.Component
class HogePage extends Component {
  doSomething = param => {
    (async () => {
      const result = await this.props.hogeActions.getData(param);

      // ごにょごにょ
    })()
  }
}

// 略

export default connect(mapStateToProps, mapDispatchToProps)(HogePage)

まとめ

  • 最初からチューニングのコードは入れておく
  • PureComponentは効果があるときだけ使う
  • Reduxに乗せる必要のないものは載せない
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした