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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for takahi5 takahi5
October 15, 2020
Technology
110
1

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

Avatar for takahi5

takahi5

October 15, 2020

More Decks by takahi5

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

Other Decks in Technology

See All in Technology
深夜のクラウド懺悔室 1:29:300 or 1:0:0
Avatar for kazzpapa3 kazzpapa3
0
180
Self Healing Rollouts: Automating Production Fixes with Agentic AI
Avatar for Kevin Dubois kdubois
0
160
プロダクト思考 × 基盤思考を AIで実現する Compound Engineering
Avatar for Watanabe Takeshi(Buzz) tkc66buzz
1
270
なぜSRE・セキュリティは評価されないのか？守りの組織を事業成長エンジンに変えた実践
Avatar for サイバーセキュリティクラウド cscengineer
PRO
3
2.3k
AI時代のAPI品質を支えるガードレール / API Guardrails for API quality in the AI ​​era
Avatar for Yoichi Kawasaki yokawasa
1
120
enechainの内製セルフサービスプラットフォーム
Avatar for Tomoya Usami hiyosi
0
120
『止めない』を設計する — 制約の中で、事業の根幹を支える判断
Avatar for Terry hiroyaterui
0
200
AIとペアプロを始める。人とのペアプロをやめる。ペアプロの良さを改めて知る。もっと好きになった。 / Rediscovering Pair Programming
Avatar for yuki honyanya
1
250
Bet AI Day 2026丨AIによって本質に戻るシステムリスク管理
Avatar for LayerX layerx
PRO
0
1.2k
Bet AI Day 2026丨How We Bet AI: AIとともに働く場をつくる
Avatar for LayerX layerx
PRO
2
2.6k
いかに伝えるか　〜新卒エンジニアの教育のための、ライトノベル活用の一例
Avatar for Akira Ikeda（池田 暁） ikedon
1
220
20260903 Tokyo Jazug Night #62 | Azure エンジニアよ、 その環境は本当にセキュアか？
Avatar for Olivia olivia_0707
1
620

Featured

See All Featured
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
230
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1369
210k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
480
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
220
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
230
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
270
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
1
350
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
3.9k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k

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