Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for takahi5 takahi5
October 15, 2020
Technology
1
97

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

Avatar for takahi5

takahi5

October 15, 2020
Tweet

More Decks by takahi5

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

Other Decks in Technology

See All in Technology
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.7k
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
Avatar for tomoki10 tomoki10
1
670
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
Avatar for VTRyo vtryo
3
1.9k
LLM拡張解体新書/llm-extension-deep-dive
Avatar for oracle4engineer oracle4engineer
PRO
24
6.3k
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
6.9k
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
Avatar for Hiroka Zaitsu zaimy
1
400
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
Avatar for karacoro / からころ tsukuha
1
380
ロールが細分化された組織でSREは何をするか？
Avatar for norimichi.osanai tgidgd
1
420
振り返りTransit Gateway ～VPCをいい感じでつなげるために～
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
3
210
20250708オープンエンドな探索と知識発見
Avatar for Sakana AI sakana_ai
PRO
4
1k
VS CodeとGitHub Copilotで爆速開発！アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
Avatar for Yusuke Yamada yamachu
3
460
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
Avatar for hanayo04 hanayo04
1
400

Featured

See All Featured
Faster Mobile Websites
Avatar for Dean Hume deanohume
308
31k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
47
9.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k

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)プロフ欄にクーポンあります！