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

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

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

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

More Decks by takahi5

Other Decks in Technology

Featured

Transcript