$30 off During Our Annual Pro Sale. View Details »

React Native パフォーマンス最適化 - 2020-10-15 RN Tech Blog

takahi5
October 15, 2020
Technology
1
42

React Native パフォーマンス最適化 - 2020-10-15 RN Tech Blog

takahi5

October 15, 2020
Tweet

More Decks by takahi5

See All by takahi5
仮説検証フェーズの開発 with React Native
takahi5
0
46
React Nativeでアニメーションを頑張る- React Native Meetup #11
takahi5
4
780
React Native x Firebaseの メリットとTips5選
takahi5
1
1.4k
怖くないexpo eject - TECH STAND #2
takahi5
0
1.3k
リリースから1年経った React Nativeアプリの リファクタリング
takahi5
0
430
リモートワーク×副業 が中心のチームづくり
takahi5
0
820
React Native + Expoなアプリを リリースして1年を”5分”で振り返る
takahi5
1
230

Other Decks in Technology

See All in Technology
金融システムにおけるクラウドネイティブなアーキテクチャ設計とその構築
tetsun
0
160
承認を意識したコードレビュー
buntafujikawa
0
160
AutoAI_Madoka Magica_AIを使いたくても使えない人に贈るAutoAI もう何も怖くない。奇跡も、魔法も、あるんだよ
tkhresk
0
160
[re:Invent 2022][Fin-JAWS #29]現地参加のみなさんがキラキラアップデートに目がくらんでいるスキに渋いアップデートをキャッチアップ!!
ykimi
1
240
LINE NEWSにおけるJava移行の5年間の歩みとこれから / Five Years of Java Migration and the Future of LINE NEWS
line_developers
PRO
1
540
宣言的 UI 時代のクライアントサイド DDD 大考察 / Client-side DDD in the Age of Declarative UI
guvalif
10
7k
テスト自動化で起業した10年とテスト自動化普及の歴史を振り返る
nozomiito
4
1.4k
コンテナ環境でのJava技術の進化
kazumura
6
1.3k
Unlearn Software Quality: Redefine What Should Be Really Cared
lemiorhan
1
460
Svelte Runtime 101 (JSConf JP 2022)
baseballyama
3
4.3k
API Gateway ご紹介 / api-gateway-overview
oracle4engineer
PRO
0
390
Node-RED で GCP IoT Core でつないでた仕組みを Azure IoT にライトにつなぎ変えてみる試行錯誤
1ftseabass
PRO
0
100

Featured

See All Featured
Designing the Hi-DPI Web
ddemaree
273
32k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
Principles of Awesome APIs and How to Build Them.
keavy
116
15k
Producing Creativity
orderedlist
PRO
335
37k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Gamification - CAS2011
davidbonilla
75
4k
StorybookのUI Testing Handbookを読んだ
zakiyama
7
3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
How STYLIGHT went responsive
nonsquared
86
4.1k
The Mythical Team-Month
searls
210
40k
Fireside Chat
paigeccino
16
1.7k
4 Signs Your Business is Dying
shpigford
170
20k

Transcript

  1. React Native パフォーマンス 最適化 ワダタカヒコ @takahi5

  2. 和田崇彦(ワダタカヒコ) @takahi5 • DeNA > マリクル > 独立 • React

    Nativeでアプリ開発 • React NativeのUdemyコース を作ったり

  3. スポーツ観戦を楽しくするアプリ • リアルタイム実況 • 応援 • ギフティング SpoLive

  4. 今日話すこと パフォーマンス最適化

  5. 起動に時間がか かる スクロールが カクカクする APIで情報取得 するのに 時間がかかる ボタンタップの 反応が悪い パフォーマンス最適化

  6. メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 パフォーマンス最適化

  7. メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他

  8. メインスレッドとJSスレッド Main (Native) Thread JavaScript Thread Bridge UI ビジネス ロジック

  9. JS側が忙しくなりがち メインでできることはメインに Main (Native) Thread JavaScript Thread Bridge UI ビジネス

    ロジック

  10. useNativeDriver Animatedでアニメーションしている場合 useNativeDriverオプションをtrueに

  11. useNativeDriver メイン (Native) JavaScript Bridge +1px +2px +3px +4px メイン

    (Native) JavaScript Bridge 1秒間で +10px動かして OK 1秒間で+10pxだから... 次のフレームは〜 useNativeDriver = false useNativeDriver = true

  12. メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 レンダリング回数を減らす

  13. レンダリング回数 = stateの更新回数 × (更新対象の)コンポーネント数

  14. 実験: 親のstateが更新されるとどうなるのか? App state.count LargeItem MiddleItem SmallItem 関係ないstateの countを更新してみる

  15. 結果: 全ての子が再レンダリング App state.count LargeItem MiddleItem SmallItem 更新 render render

    render

  16. メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 stateの更新を減らす

  17. stateの更新を減らす① 画面描画と関係ない変数はuseRefを利用

  18. stateの更新を減らす② そもそもの更新回数を減らす

  19. stateの更新回数を減らす - SpoLive事例 ⚽ ⚽ state更新 state更新 state更新 state更新 state更新

  20. メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 更新対象のコンポーネントを減らす

  21. memo化 (or PureComponent) propsに変化(*)がない場合は再レンダリングしない *浅い比較

  22. memo化(or PureComponent) で FlatListを最適化してみよう

  23. 実験: FlatList ※FlastList自体は PureComponent

  24. 結果: FlatList render render render count 更新

  25. 便利ツール: why-did-you-renderでチェック！ renderItemが同じ名前だけど 別オブジェクトって判定されてるよ 原因: アロー関数が都度生成されている

  26. useCallback で関数の再生成を防ぐ

  27. さらに... FlatListの子コンポーネントもmemo化しよう 子コンポーネントも memo化しておく

  28. SpoLive事例: memo化 Before After memo化 FlatList全体で 71.5ms → 1.7ms react-devtoolsにて計測

  29. メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 その他(罠?)

  30. Stackされた裏の画面が更新 フィード フォロー 更新

  31. FireStoreの通信処理自体が負荷に onSnapShot onSnapShot onSnapShot onSnapShot onSnapShot

  32. メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 ・useNativeDriver ・useRef ・そもそも更新減らす

    ・memo化 ・裏の画面 ・通信など まとめ

  33. 最後に • パフォーマンスが気になったらやりましょう • 初めから最適化する必要はない • まず計測から

  34. PR スポーツファン(サッカー,ラグビーなど) の方、是非お試しを！ エンジニアも募集中です！ Udemyの React Native + Firebaseコース twitter(@takahi5)プロフ欄にクーポンあります！