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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for takahi5 takahi5
October 15, 2020
Technology
1
100

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
140
React Nativeでアニメーションを頑張る- React Native Meetup #11
Avatar for takahi5 takahi5
4
1.6k
React Native x Firebaseの メリットとTips5選
Avatar for takahi5 takahi5
1
2.2k
怖くないexpo eject - TECH STAND #2
Avatar for takahi5 takahi5
0
2.1k
リリースから1年経った React Nativeアプリの リファクタリング
Avatar for takahi5 takahi5
0
750
リモートワーク×副業 が中心のチームづくり
Avatar for takahi5 takahi5
0
1.4k
React Native + Expoなアプリを リリースして1年を”5分”で振り返る
Avatar for takahi5 takahi5
1
320

Other Decks in Technology

See All in Technology
Scrumは歪む — 組織設計の原理原則
Avatar for Daisuke Ashihara dashi
0
190
アーキテクチャモダナイゼーションを実現する組織
Avatar for SatohJohn satohjohn
2
940
Sansanでの認証基盤内製化と移行
Avatar for SansanTech sansantech
PRO
0
490
銀行の​内製開発にて​2つの​プロダクトを​１つのチームで​スクラムしてみてる​話
Avatar for koba1210 koba1210
1
130
JAWSDAYS2026_A-6_現場SEが語る 回せるセキュリティ運用～設計で可視化、AIで加速する「楽に回る」運用設計のコツ～
Avatar for s-hata shoki_hata
0
3k
Abuse report だけじゃない。AWS から緊急連絡が来る状況とは？昨今の攻撃や被害の事例の紹介と備えておきたい考え方について
Avatar for kazzpapa3 kazzpapa3
1
760
It’s “Time” to use Temporal
Avatar for Saji sajikix
2
160
AIエージェント、 社内展開の前に知っておきたいこと
Avatar for oracle4engineer oracle4engineer
PRO
2
140
JAWS DAYS 2026 楽しく学ぼう！ストレージ 入門
Avatar for Yoshiki Fujiwara yoshiki0705
2
190
Dr. Werner Vogelsの14年のキーノートから紐解くエンジニアリング組織への処方箋@JAWS DAYS 2026
Avatar for Hiroshi Hayakawa (p0n) p0n
1
140
わからなくて良いなら、わからなきゃだめなの？
Avatar for kota oue kotaoue
1
360
楽しく学ぼう！ネットワーク入門
Avatar for Shota Shiratori shotashiratori
1
390

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.1k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
220
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
140
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
260
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
180
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
290

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