Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

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

Other Decks in Technology

See All in Technology
生成AI時代の自動E2Eテスト運用とPlaywright実践知_引持力哉
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
0
210
日本Rubyの会の構造と実行とあと何か / hokurikurk01
Avatar for Masayoshi Takahashi takahashim
4
970
文字列の並び順 / Unicode Collation
Avatar for とみたまさひろ tmtms
3
350
WordPress は終わったのか ～今のWordPress の制作手法ってなにがあんねん？～ / Is WordPress Over? How We Build with WordPress Today
Avatar for tbshiki tbshiki
1
580
エンジニアとPMのドメイン知識の溝をなくす、 AIネイティブな開発プロセス
Avatar for Michiru Kato applism118
4
1.1k
「Managed Instances」と「durable functions」で広がるAWS Lambdaのユースケース
Avatar for Lamaglama39 lamaglama39
0
290
LLM-Readyなデータ基盤を高速に構築するためのアジャイルデータモデリングの実例
Avatar for Kashira kashira
0
220
世界最速級 memcached 互換サーバー作った
Avatar for yasukata yasukata
0
330
Ruby で作る大規模イベントネットワーク構築・運用支援システム TTDB
Avatar for Taketo Takashima taketo1113
1
220
コミューンのデータ分析AIエージェント「Community Sage」の紹介
Avatar for Yusuke Fukasawa fufufukakaka
0
460
[デモです] NotebookLM で作ったスライドの例
Avatar for Takaaki Tanaka kongmingstrap
0
110
小さな判断で育つ、大きな意思決定力 / 20251204 Takahiro Kinjo
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
580

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.8k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
970
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
1
94
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.3k

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