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
830
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
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
180
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
180
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
570
20250913_JAWS_sysad_kobe
takuyay0ne
2
230
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
430
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
480
いま注目のAIエージェントを作ってみよう
supermarimobros
0
310
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
440
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
470
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
GitHub's CSS Performance
jonrohan
1032
460k
It's Worth the Effort
3n
187
28k
Statistics for Hackers
jakevdp
799
220k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Practical Orchestrator
shlominoach
190
11k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Writing Fast Ruby
sferik
628
62k
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