2020.10.15 React Native Tech Blog LT #5

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