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
List型View(FlatList)とのパフォーマンスとの戦い
Search
potproject
May 29, 2020
Technology
1
820
List型View(FlatList)とのパフォーマンスとの戦い
2020/5/29 React Native Meetup #10 LT
potproject
May 29, 2020
Tweet
Share
More Decks by potproject
See All by potproject
サーバレスアーキテクチャとNuxtで特設サイトを作った話
potproject
1
1.2k
Other Decks in Technology
See All in Technology
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
170
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
350
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
220
AIのAIによるAIのための出力評価と改善
chocoyama
2
560
5min GuardDuty Extended Threat Detection EKS
takakuni
0
150
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
400
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
170
Prox Industries株式会社 会社紹介資料
proxindustries
0
300
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
5.6k
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
460
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
24
1.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
It's Worth the Effort
3n
185
28k
A designer walks into a library…
pauljervisheath
207
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Writing Fast Ruby
sferik
628
61k
Making Projects Easy
brettharned
116
6.3k
BBQ
matthewcrist
89
9.7k
GraphQLとの向き合い方2022年版
quramy
48
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Transcript
List型View FlatList とのパフォーマンスとの戦い @potpro List型View FlatList とのパフォーマンスとの戦い 1
⾃⼰紹介 @potpro ぽとぷろ https://blog.potproject.net/ https://mastodon.potproject.net/ PHP / Go / JS
Vue / React 仕事で⼤体サーバサイドエンジニア 趣味でフロントエンド/インフラエンジニア List型View FlatList とのパフォーマンスとの戦い 2
趣味でMastodonのクライアントア プリを作ってます potproject/ikuradon Expo Managed Workflow Eject無 し での開発 今時っぽいUI
最近React Navigation v5 + React Hooks にすべて書き換えている ※ 画⾯は開発中のものです List型View FlatList とのパフォーマンスとの戦い 3
今⽇の題材 この部分のパフォーマンスの話 FlatList を使⽤しています これの話が今回はメインです 投稿は気にしないで下さい List型View FlatList とのパフォーマンスとの戦い 4
FlatList React NativeにおけるList型Viewの 標準インターフェース ヘッダーやフッター、リフレッシ ュコントロール 引っ張ったら更新 されるアレ などが標準搭載 ListViewというものも存在したが、
既にDeprecatedになりこちらが現 在は標準 List型View FlatList とのパフォーマンスとの戦い 5
実装例 全く知らない⼈のために const DATA = [ { id: '1', title:
'First Item', }, { id: '2', title: 'Second Item', }, { id: '3', title: 'Third Item', }, ]; export default function App() { return ( <View> <FlatList data={DATA} renderItem={({ item }) => <Text>{item.title}</Text>} keyExtractor={item => item.id} /> </View> ); } List型View FlatList とのパフォーマンスとの戦い 6
パフォーマンス問題にぶち当たる List型View FlatList とのパフォーマンスとの戦い 7
FlatListのパフォーマンス問題 実際にアプリを開発時に浮上した問題 リスト更新時、 リストに追加がなくても 必ず1秒以上かかってしまう 普段使いしてるとちょっと気になるレベル ネットワークが遅いのかなと思ったけどレスポンスは50ms以下・・・ 更新しまくるとハイスペックなはずのiPhone11 Proの発熱がマッハ UIのFPSもかなり落ちてしまう
List型View FlatList とのパフォーマンスとの戦い 8
FlatListのパフォーマンス問題 リストの数が増えるとパフォーマンスがかなり悪化することは、 割と知られている いろんなところで話された結果、最適化の⽅法についてgithubリポジトリが存在する https://github.com/filipemerker/flatlist-performance-tips ここを参考に改善していく List型View FlatList とのパフォーマンスとの戦い 9
FlatListのチューニング概要 ⼤体⼤きく分けて2つの⽅法があります propsのチューニング FlatListに渡す値を調整することでパフォーマンス改善につながることがある 今回のケースではメリットが薄く、デメリットが多かった うまく表⽰されない、スクロ ールが重くなってしまうなど リストの構造を変える リスト⾃体のコンポーネントを軽くする戦略 デメリットもある場合もあるが、場合によってはWin-Winの物もある
こちらを主にやっていくことで、パフォーマンスに⼤きな効果があった List型View FlatList とのパフォーマンスとの戦い 10
実際に改善したこと・⼿法 効果が⾼かったものを紹介 最終的に割と⼀般的なReactのパフォーマンス向上⽅法になったので、 FlatList以外にも使える⽅法だと思います List型View FlatList とのパフォーマンスとの戦い 11
改善 1 Viewの数を減らす Viewの数を減らし、シンプルにする 1つ増えるとリストの数だけ増える為、レンダリングコストが上がる 計算量:O n になり塵も積もれば⼭となる存在に <View style={styles.container}>
<View style={styles.list}> <View style={styles.item}> <View style={styles.item2}></View> </View> <View style={styles.item}> <View style={styles.item2}></View> </View> </View> </View> ↑こういった Viewの無駄遣いを辞める こんなことしなくてもstyleをうまく使えば⼤体やりたいことは実現できるはず List型View FlatList とのパフォーマンスとの戦い 12
改善 2 List内部でReact ReduxのStoreを使わない Rowの中で useSelector クラスなら connect を使わない コストが⾼い為、FlatListの外でuseSelectorをして、Propsで渡す
これも計算量0 n の問題 export default function App() { // Redux Store 取得 const data = useSelector(reducer); return ( <View> <FlatList data={data} renderItem={({ item }) => <Text>{item.title}</Text>} keyExtractor={item => item.id} /> </View> ); } List型View FlatList とのパフォーマンスとの戦い 13
改善 3 React.memo useMemo を使う どちらもデータを保持しておき、データを⽐較してレンダリングしないできるパフォーマンス 改善⽤機能 React.memo はコンポーネント全体、 useMemo
は⼀部に使⽤可能 この2つはfunctional component⽤なので、クラスは PureComponent を使う 更新されない場合はレンダリングされないので、パフォーマンスが⼤幅に向上 しかし要件にうまく合っていないと不具合となってしまうので注意 今の時間を表⽰する、みたいなものはうまく動作しなくなる可能性あり List型View FlatList とのパフォーマンスとの戦い 14
React.memo 使⽤例 export default function App() { // Redux Store
取得 const data = useSelector(reducer); //Props で受け渡す return ( <View> <FlatList data={data} extraData={data} renderItem={({ item }) => <Row id={item.id} title={item.title} />} keyExtractor={item => item.id} /> </View> ); } function List({id, title}){ return ( <View id={id}> <Text>{title}</Text> </View> ); } // React.memo() の引数にReact コンポーネントを渡す // 旧Props と新Props を⽐較して判断します // ID とタイトルが変更された時だけレンダリング const Row = React.memo(List, (p, n) => p.id === n.id && p.title === n.title); List型View FlatList とのパフォーマンスとの戦い 15
改善後 Before: リスト更新時の処理: 1200 更新0件 〜2000 更新40件 ms After: リスト更新時の処理:
50 更新0件 〜 1200 更新40件 ms チューニングと不要不急のレンダリングをやめたことで、かなり快適になった 発熱もなくなりました List型View FlatList とのパフォーマンスとの戦い 16
まとめ FlatListは使いやすいけど、パフォーマンス問題は結構⼤変 100以上のリストをリッチに扱うと厳しくなる ⾊々やっても実は問題がまだまだある メモリ使⽤量はやっぱり⾼い、マシになったが爆速とは⾔えない 更に解決するためにFlatList以外を使う⽅法もある ネイティブ実装で早いらしい bolan9999/react-native-largelist 幅を計算する必要があるがパフォーマンスが⾼いらしい Flipkart/recyclerlistview
まだ検証できていないので時間があるときに検討したい List型View FlatList とのパフォーマンスとの戦い 17
ご静聴ありがとうございました List型View FlatList とのパフォーマンスとの戦い 18