React.memo なんていらんよね

2020-12-23

と、挑発的なタイトルにしましたが、とはいえ基本はいらんよなーと思っています。

React.memo って、個人的にはパフォーマンス向上手段の奥の手みたいなイメージがあります。

なぜ個人的に React.memo は不要だと思っているか、だらだらーっと書いていこうと思います。


そもそも React.memo とは

公式サイト を読みましょう。

与えられた props をチェックして render 回数を抑制する HoC ってイメージで良いと思います。

React.memo が有用なケースとは

Use React.memo() wisely という記事にとてもわかりやすい 4 箇条が書かれています。

  1. Pure functional component
  2. Renders often
  3. Re-renders with the same props
  4. Medium to big size

1 つずつ解説をば。

Pure functional component

You is functional and given the same props, always renders the same output.

そのコンポーネントは functional であり同じ props を与えられ毎回同じ結果を render している。

Renders often

Your renders often.

そのコンポーネントはしょっちゅう render している。

Re-renders with the same props

Your is usually provided with the same props during re-rendering.

そのコンポーネントは大抵 re-render 中に同じ props が与えられる。

Medium to big size

Your contains a decent amount of UI elements to reason props equality check.

そのコンポーネントは props が等しいかチェックを推論する UI 要素がかなりの量含まれている。

render 回数が減れば描画速度は上がる?

一番誤解されているところですが 「render 回数が減る」イコール「描画速度が上がる」わけではありません。

React.memo を使用した場合、そのコンポーネントが呼ばれるたびに実質的に shouldComponentUpdate に近い処理が走った後、結果によって render を行ったり行わなかったりします。

逆に、React.memo を使用しなければ判定処理自体がスキップされて毎回 render が走ります。

どちらのケースのほうが描画速度が早いかはケースバイケースですし、こればっかりは描画時間を測定してみないとわからないですよね。

また小さいコンポーネントであれば React.memo を使用しようがしまいが描画速度の差なんて誤差なわけで。

それならそれで「じゃあいらんよね」って人と「じゃあいるよね」という人で真っ二つに意見が割れそうな気もしますが…。

自分が一番言いたいこと

React.memo の使用を考える前に本当にやれるだけの最適化をしっかり行ったのか、まずはそこが一番大切だと思っています。

UI / UX の設計に無理はないか、api の呼び出しは最適化されているか、不必要な処理を行っていないか、まずはそこを見直しましょう。

それらをすべて見直した後、それでも描画速度が改善されないようであれば React.memo の導入を考える、その程度のものかなーと。

また導入する場合はきちんと導入前と後の処理速度の差を計測することが大切です。

React.memo を導入したからといってパフォーマンスが上がる保証はありません。

加えて、導入前と後で処理や描画に差がないかテストを行うことも重要です。

レンダーを「抑止する」ために使用しないでください。

上記のように公式サイトに書かれていますが、パフォーマンスの向上目的以外の目的で使用するものではありません。

結論

色々とめんどくさいし、やっぱいらんよね。

上にも書きましたが、最適化しまくったのに描画や更新が遅いケースで導入を考える程度のものだと思います。

もちろん場合によっては非常に強い効果を発揮するケースもあると思います。

結局ケースバイケースですが、普段は気にしなくて良いよ、って感じの立ち位置じゃないでしょうか。


ユースケースを調べてもなかなか情報が出ないのですが、つまりそれくらい優先度は低いものだと思います。

どういうときに使われているんですかね?複雑な UI でリアルタイムでの描画が求められるケース?株や FX 系のサービスとか?

ちなみに Use React.memo() wisely に書かれているユースケース にも、例えばリアルタイムで更新されるようなケースで有用だよ!と書かれていますね。

もし他に有用なケースをご存じの方がおられましたら、ぜひぜひ Discord などで教えてもらえるとめちゃくちゃ嬉しいです。

© 2018 kk-web