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
90
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
92
React Nativeでアニメーションを頑張る- React Native Meetup #11
takahi5
4
1.3k
React Native x Firebaseの メリットとTips5選
takahi5
1
1.9k
怖くないexpo eject - TECH STAND #2
takahi5
0
1.9k
リリースから1年経った React Nativeアプリの リファクタリング
takahi5
0
600
リモートワーク×副業 が中心のチームづくり
takahi5
0
1.1k
React Native + Expoなアプリを リリースして1年を”5分”で振り返る
takahi5
1
260
Other Decks in Technology
See All in Technology
本番のトラフィック量でHudiを検証して見えてきた課題
joker1007
2
240
管理画面とユーザー機能の調和を取り戻す!~クエリパフォーマンス改善の成功物語~ / Restore harmony between administrative and user functions!
minisera
1
240
自然言語処理を役立てるのはなぜ難しいのか
pfn
PRO
15
4.3k
テストを楽に書きたい
tomorrowkey
2
270
XSS攻撃から考察するAWS設定不備の恐怖/20241012 Hironobu Otaki
shift_evolve
0
110
Demystifying Vite Internals
nozomuikuta
2
240
【㈱アイモバイル】エンジニア向け会社説明資料
imobile
0
480
とある事業会社にとっての Kaggler の魅力
hakubishin3
7
1.5k
From naive to advanced RAG: the complete guide
glaforge
0
620
生成AI入門
shukob
0
140
地域DXにおけるGrafana活用事例
wacky
0
370
ラブグラフ紹介資料 〜プロダクト解体新書〜 / Lovegraph Product Deck
lovegraph
0
14k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
450k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The World Runs on Bad Software
bkeepers
PRO
65
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
A Tale of Four Properties
chriscoyier
156
22k
Building Applications with DynamoDB
mza
90
6k
Rails Girls Zürich Keynote
gr2m
93
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Designing for Performance
lara
604
68k
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)プロフ欄にクーポンあります!