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
98

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
130
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
720
リモートワーク×副業 が中心のチームづくり
Avatar for takahi5 takahi5
0
1.3k
React Native + Expoなアプリを リリースして1年を”5分”で振り返る
Avatar for takahi5 takahi5
1
310

Other Decks in Technology

See All in Technology
様々なファイルシステム
Avatar for Satoru Takeuchi sat
PRO
0
260
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
Avatar for katsuhisa_ katsuhisa91
PRO
3
1.4k
What's new in OpenShift 4.20
Avatar for Red Hat Livestreaming redhatlivestreaming
0
290
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
Avatar for emi emiki
0
250
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
14
82k
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
Avatar for Tatsumi Nishikawa tatsumin39
0
180
AI時代の発信活動 ～技術者として認知してもらうための発信法～ / 20251028 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
100
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
Avatar for tenforward tenforward
1
130
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
Avatar for 株式会社カミナシ kaminashi
1
740
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
Avatar for sayn0 sayn0
1
320
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
Avatar for Makky makky_tyuyan
0
140
AIエージェントによる業務効率化への飽くなき挑戦 -AWS上の実開発事例から学んだ効果、現実そしてギャップ-
Avatar for Kiminori Yokoi nasuvitz
5
1.3k

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
161
23k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
233
18k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
116
20k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.6k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k

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