Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native パフォーマンス最適化 - 2020-10-15 RN Tech Blog
Search
takahi5
October 15, 2020
Technology
1
98
React Native パフォーマンス最適化 - 2020-10-15 RN Tech Blog
takahi5
October 15, 2020
Tweet
Share
More Decks by takahi5
See All by takahi5
仮説検証フェーズの開発 with React Native
takahi5
0
130
React Nativeでアニメーションを頑張る- React Native Meetup #11
takahi5
4
1.5k
React Native x Firebaseの メリットとTips5選
takahi5
1
2.1k
怖くないexpo eject - TECH STAND #2
takahi5
0
2.1k
リリースから1年経った React Nativeアプリの リファクタリング
takahi5
0
720
リモートワーク×副業 が中心のチームづくり
takahi5
0
1.3k
React Native + Expoなアプリを リリースして1年を”5分”で振り返る
takahi5
1
310
Other Decks in Technology
See All in Technology
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
440
20251027_findyさん_音声エージェントLT
almondo_event
2
460
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
210
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
170
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
270
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
150
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
190
AI機能プロジェクト炎上の 3つのしくじりと学び
nakawai
0
120
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
7
3.5k
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
4
3.5k
OCIjp_Oracle AI World_Recap
shinpy
1
180
知覚とデザイン
rinchoku
1
600
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
470k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Into the Great Unknown - MozCon
thekraken
40
2.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Transcript
React Native パフォーマンス 最適化 ワダタカヒコ @takahi5
和田崇彦(ワダタカヒコ) @takahi5 • DeNA > マリクル > 独立 • React
Nativeでアプリ開発 • React NativeのUdemyコース を作ったり
スポーツ観戦を楽しくするアプリ • リアルタイム実況 • 応援 • ギフティング SpoLive
今日話すこと パフォーマンス最適化
起動に時間がか かる スクロールが カクカクする APIで情報取得 するのに 時間がかかる ボタンタップの 反応が悪い パフォーマンス最適化
メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 パフォーマンス最適化
メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他
メインスレッドとJSスレッド Main (Native) Thread JavaScript Thread Bridge UI ビジネス ロジック
JS側が忙しくなりがち メインでできることはメインに Main (Native) Thread JavaScript Thread Bridge UI ビジネス
ロジック
useNativeDriver Animatedでアニメーションしている場合 useNativeDriverオプションをtrueに
useNativeDriver メイン (Native) JavaScript Bridge +1px +2px +3px +4px メイン
(Native) JavaScript Bridge 1秒間で +10px動かして OK 1秒間で+10pxだから... 次のフレームは〜 useNativeDriver = false useNativeDriver = true
メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 レンダリング回数を減らす
レンダリング回数 = stateの更新回数 × (更新対象の)コンポーネント数
実験: 親のstateが更新されるとどうなるのか? App state.count LargeItem MiddleItem SmallItem 関係ないstateの countを更新してみる
結果: 全ての子が再レンダリング App state.count LargeItem MiddleItem SmallItem 更新 render render
render
メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 stateの更新を減らす
stateの更新を減らす① 画面描画と関係ない変数はuseRefを利用
stateの更新を減らす② そもそもの更新回数を減らす
stateの更新回数を減らす - SpoLive事例 ⚽ ⚽ state更新 state更新 state更新 state更新 state更新
メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 更新対象のコンポーネントを減らす
memo化 (or PureComponent) propsに変化(*)がない場合は再レンダリングしない *浅い比較
memo化(or PureComponent) で FlatListを最適化してみよう
実験: FlatList ※FlastList自体は PureComponent
結果: FlatList render render render count 更新
便利ツール: why-did-you-renderでチェック! renderItemが同じ名前だけど 別オブジェクトって判定されてるよ 原因: アロー関数が都度生成されている
useCallback で関数の再生成を防ぐ
さらに... FlatListの子コンポーネントもmemo化しよう 子コンポーネントも memo化しておく
SpoLive事例: memo化 Before After memo化 FlatList全体で 71.5ms → 1.7ms react-devtoolsにて計測
メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 その他(罠?)
Stackされた裏の画面が更新 フィード フォロー 更新
FireStoreの通信処理自体が負荷に onSnapShot onSnapShot onSnapShot onSnapShot onSnapShot
メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 ・useNativeDriver ・useRef ・そもそも更新減らす
・memo化 ・裏の画面 ・通信など まとめ
最後に • パフォーマンスが気になったらやりましょう • 初めから最適化する必要はない • まず計測から
PR スポーツファン(サッカー,ラグビーなど) の方、是非お試しを! エンジニアも募集中です! Udemyの React Native + Firebaseコース twitter(@takahi5)プロフ欄にクーポンあります!