Submit Search
Upload
React Native performance optimization
•
3 likes
•
967 views
Takahiko Wada
Follow
2020.10.15 React Native Tech Blog LT #5
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 34
Download now
Download to read offline
Recommended
KubernetesでPHPを動かした話
KubernetesでPHPを動かした話
gree_tech
PHP Version Up と AWS への移行
PHP Version Up と AWS への移行
gree_tech
インフラ構築とテストについて(ITインフラ業務自動化現状確認会)
インフラ構築とテストについて(ITインフラ業務自動化現状確認会)
Yosuke Hiraishi
アプリエンジニアからクラウド専用のインフラエンジニアになってみて
アプリエンジニアからクラウド専用のインフラエンジニアになってみて
Sato Shun
Works of site reliability engineer
Works of site reliability engineer
Shohei Kobayashi
20190514 googlehomeandazure
20190514 googlehomeandazure
ひかり 影中
コンテナ時代にインフラエンジニアは何をするのか
コンテナ時代にインフラエンジニアは何をするのか
gree_tech
Scalaのコンパイル速度の話が聞きたいだろうし、するつもりだ
Scalaのコンパイル速度の話が聞きたいだろうし、するつもりだ
yoshiaki iwanaga
Recommended
KubernetesでPHPを動かした話
KubernetesでPHPを動かした話
gree_tech
PHP Version Up と AWS への移行
PHP Version Up と AWS への移行
gree_tech
インフラ構築とテストについて(ITインフラ業務自動化現状確認会)
インフラ構築とテストについて(ITインフラ業務自動化現状確認会)
Yosuke Hiraishi
アプリエンジニアからクラウド専用のインフラエンジニアになってみて
アプリエンジニアからクラウド専用のインフラエンジニアになってみて
Sato Shun
Works of site reliability engineer
Works of site reliability engineer
Shohei Kobayashi
20190514 googlehomeandazure
20190514 googlehomeandazure
ひかり 影中
コンテナ時代にインフラエンジニアは何をするのか
コンテナ時代にインフラエンジニアは何をするのか
gree_tech
Scalaのコンパイル速度の話が聞きたいだろうし、するつもりだ
Scalaのコンパイル速度の話が聞きたいだろうし、するつもりだ
yoshiaki iwanaga
2015-05-23 クラウドの運用になって インフラエンジニアは何が変わるのか?
2015-05-23 クラウドの運用になって インフラエンジニアは何が変わるのか?
Operation Lab, LLC.
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜
Katsuhiro Miura
リーダブルコード勉強会 in 筑波大のアイスブレイク
リーダブルコード勉強会 in 筑波大のアイスブレイク
Kouhei Sutou
phpcon2017 LT01 MDD
phpcon2017 LT01 MDD
Masahiko Jinno
SEゼミ2015 - リーダブルコード勉強会のアイスブレイク
SEゼミ2015 - リーダブルコード勉強会のアイスブレイク
Kouhei Sutou
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
Yahoo!デベロッパーネットワーク
LancersのCakePHPバージョンアップ施策について
LancersのCakePHPバージョンアップ施策について
Shigemasa Akiyama
OSS強化学習向けゲーム環境の動向
OSS強化学習向けゲーム環境の動向
gree_tech
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
gree_tech
Springを使ったwebアプリにリファクタリングしよう
Springを使ったwebアプリにリファクタリングしよう
土岐 孝平
JAWSUG金沢10 - 俺と「AWS外部から観測」
JAWSUG金沢10 - 俺と「AWS外部から観測」
Masayuki KaToH
Jsugプレゼン資料new
Jsugプレゼン資料new
Wataru Kakizoe
インフラエンジニアの綺麗で優しい手順書の書き方
インフラエンジニアの綺麗で優しい手順書の書き方
Shohei Koyama
Spring I/O 2017での拡張のお話
Spring I/O 2017での拡張のお話
Alisa Sasaki
20200923 miyazaki
20200923 miyazaki
beyond Co., Ltd.
入門者の方向け Azure PlayFab の簡単な紹介
入門者の方向け Azure PlayFab の簡単な紹介
YutoNishine
DevLOVE関西2016.2.5 地道にAWS構築自動化に取り組んでいるお話し
DevLOVE関西2016.2.5 地道にAWS構築自動化に取り組んでいるお話し
Akira Nagata
オブラブ冬合宿以降にやったことのふりかえり
オブラブ冬合宿以降にやったことのふりかえり
Yasunobu Kawaguchi
[SAPPORO CEDEC] サービスの効果を高めるグリー内製ツールの技術と紹介
[SAPPORO CEDEC] サービスの効果を高めるグリー内製ツールの技術と紹介
gree_tech
あるインフラエンジニアの過去と未来
あるインフラエンジニアの過去と未来
Tsubasa Hirota
Zealup - React
Zealup - React
Masahiro Yanou
JSR 352 “Batch Applications for the Java Platform”
JSR 352 “Batch Applications for the Java Platform”
Norito Agetsuma
More Related Content
What's hot
2015-05-23 クラウドの運用になって インフラエンジニアは何が変わるのか?
2015-05-23 クラウドの運用になって インフラエンジニアは何が変わるのか?
Operation Lab, LLC.
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜
Katsuhiro Miura
リーダブルコード勉強会 in 筑波大のアイスブレイク
リーダブルコード勉強会 in 筑波大のアイスブレイク
Kouhei Sutou
phpcon2017 LT01 MDD
phpcon2017 LT01 MDD
Masahiko Jinno
SEゼミ2015 - リーダブルコード勉強会のアイスブレイク
SEゼミ2015 - リーダブルコード勉強会のアイスブレイク
Kouhei Sutou
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
Yahoo!デベロッパーネットワーク
LancersのCakePHPバージョンアップ施策について
LancersのCakePHPバージョンアップ施策について
Shigemasa Akiyama
OSS強化学習向けゲーム環境の動向
OSS強化学習向けゲーム環境の動向
gree_tech
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
gree_tech
Springを使ったwebアプリにリファクタリングしよう
Springを使ったwebアプリにリファクタリングしよう
土岐 孝平
JAWSUG金沢10 - 俺と「AWS外部から観測」
JAWSUG金沢10 - 俺と「AWS外部から観測」
Masayuki KaToH
Jsugプレゼン資料new
Jsugプレゼン資料new
Wataru Kakizoe
インフラエンジニアの綺麗で優しい手順書の書き方
インフラエンジニアの綺麗で優しい手順書の書き方
Shohei Koyama
Spring I/O 2017での拡張のお話
Spring I/O 2017での拡張のお話
Alisa Sasaki
20200923 miyazaki
20200923 miyazaki
beyond Co., Ltd.
入門者の方向け Azure PlayFab の簡単な紹介
入門者の方向け Azure PlayFab の簡単な紹介
YutoNishine
DevLOVE関西2016.2.5 地道にAWS構築自動化に取り組んでいるお話し
DevLOVE関西2016.2.5 地道にAWS構築自動化に取り組んでいるお話し
Akira Nagata
オブラブ冬合宿以降にやったことのふりかえり
オブラブ冬合宿以降にやったことのふりかえり
Yasunobu Kawaguchi
[SAPPORO CEDEC] サービスの効果を高めるグリー内製ツールの技術と紹介
[SAPPORO CEDEC] サービスの効果を高めるグリー内製ツールの技術と紹介
gree_tech
あるインフラエンジニアの過去と未来
あるインフラエンジニアの過去と未来
Tsubasa Hirota
What's hot
(20)
2015-05-23 クラウドの運用になって インフラエンジニアは何が変わるのか?
2015-05-23 クラウドの運用になって インフラエンジニアは何が変わるのか?
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜
リーダブルコード勉強会 in 筑波大のアイスブレイク
リーダブルコード勉強会 in 筑波大のアイスブレイク
phpcon2017 LT01 MDD
phpcon2017 LT01 MDD
SEゼミ2015 - リーダブルコード勉強会のアイスブレイク
SEゼミ2015 - リーダブルコード勉強会のアイスブレイク
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
LancersのCakePHPバージョンアップ施策について
LancersのCakePHPバージョンアップ施策について
OSS強化学習向けゲーム環境の動向
OSS強化学習向けゲーム環境の動向
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
Springを使ったwebアプリにリファクタリングしよう
Springを使ったwebアプリにリファクタリングしよう
JAWSUG金沢10 - 俺と「AWS外部から観測」
JAWSUG金沢10 - 俺と「AWS外部から観測」
Jsugプレゼン資料new
Jsugプレゼン資料new
インフラエンジニアの綺麗で優しい手順書の書き方
インフラエンジニアの綺麗で優しい手順書の書き方
Spring I/O 2017での拡張のお話
Spring I/O 2017での拡張のお話
20200923 miyazaki
20200923 miyazaki
入門者の方向け Azure PlayFab の簡単な紹介
入門者の方向け Azure PlayFab の簡単な紹介
DevLOVE関西2016.2.5 地道にAWS構築自動化に取り組んでいるお話し
DevLOVE関西2016.2.5 地道にAWS構築自動化に取り組んでいるお話し
オブラブ冬合宿以降にやったことのふりかえり
オブラブ冬合宿以降にやったことのふりかえり
[SAPPORO CEDEC] サービスの効果を高めるグリー内製ツールの技術と紹介
[SAPPORO CEDEC] サービスの効果を高めるグリー内製ツールの技術と紹介
あるインフラエンジニアの過去と未来
あるインフラエンジニアの過去と未来
Similar to React Native performance optimization
Zealup - React
Zealup - React
Masahiro Yanou
JSR 352 “Batch Applications for the Java Platform”
JSR 352 “Batch Applications for the Java Platform”
Norito Agetsuma
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
dcubeio
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
Tokuhiro Matsuno
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
.NET 6の期待の新機能とアップデート
.NET 6の期待の新機能とアップデート
TomomitsuKusaba
ゼロからのプログラミングRails講座 Codeanywhere版
ゼロからのプログラミングRails講座 Codeanywhere版
DIVE INTO CODE Corp.
Apex Test Plusの紹介
Apex Test Plusの紹介
Yuichiro Ebihara
JavaOne2015報告またはこれからのJava
JavaOne2015報告またはこれからのJava
なおき きしだ
自社開発プロダクト ALL-IN で行っている単体テストのパフォーマンスチューニングTips
自社開発プロダクト ALL-IN で行っている単体テストのパフォーマンスチューニングTips
Shou Takenaka
Amazon DynamoDB 初心者が理解した事
Amazon DynamoDB 初心者が理解した事
Hirokazu Tokuno
[Okta x Jamf合同新年会] Okta Workflowsによるノーコード業務改善 〜Jamf APIを使ってMac端末情報を自動収集してみよう〜
[Okta x Jamf合同新年会] Okta Workflowsによるノーコード業務改善 〜Jamf APIを使ってMac端末情報を自動収集してみよう〜
Ryo Sasaki
JJUG CCC 2017 Spring LT about JPA
JJUG CCC 2017 Spring LT about JPA
Naoya Kojima
Java web application testing
Java web application testing
Tokuhiro Matsuno
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
学 松崎
C27 基幹領域への適用におけるpostgre sqlの抱える課題 by 原嘉彦
C27 基幹領域への適用におけるpostgre sqlの抱える課題 by 原嘉彦
Insight Technology, Inc.
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
IDEを目指す開発者コンソール
IDEを目指す開発者コンソール
minoaw
Android ReactNative UITesting
Android ReactNative UITesting
Vishal Banthia
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
Similar to React Native performance optimization
(20)
Zealup - React
Zealup - React
JSR 352 “Batch Applications for the Java Platform”
JSR 352 “Batch Applications for the Java Platform”
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
.NET 6の期待の新機能とアップデート
.NET 6の期待の新機能とアップデート
ゼロからのプログラミングRails講座 Codeanywhere版
ゼロからのプログラミングRails講座 Codeanywhere版
Apex Test Plusの紹介
Apex Test Plusの紹介
JavaOne2015報告またはこれからのJava
JavaOne2015報告またはこれからのJava
自社開発プロダクト ALL-IN で行っている単体テストのパフォーマンスチューニングTips
自社開発プロダクト ALL-IN で行っている単体テストのパフォーマンスチューニングTips
Amazon DynamoDB 初心者が理解した事
Amazon DynamoDB 初心者が理解した事
[Okta x Jamf合同新年会] Okta Workflowsによるノーコード業務改善 〜Jamf APIを使ってMac端末情報を自動収集してみよう〜
[Okta x Jamf合同新年会] Okta Workflowsによるノーコード業務改善 〜Jamf APIを使ってMac端末情報を自動収集してみよう〜
JJUG CCC 2017 Spring LT about JPA
JJUG CCC 2017 Spring LT about JPA
Java web application testing
Java web application testing
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
C27 基幹領域への適用におけるpostgre sqlの抱える課題 by 原嘉彦
C27 基幹領域への適用におけるpostgre sqlの抱える課題 by 原嘉彦
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
IDEを目指す開発者コンソール
IDEを目指す開発者コンソール
Android ReactNative UITesting
Android ReactNative UITesting
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
React Native performance optimization
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)プロフ欄にクーポンあります!
Download now