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
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.8k
生成AIでwebアプリケーションを作ってみた
tajimon
2
150
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
Github Copilot エージェントモードで試してみた
ochtum
0
100
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
240
本が全く読めなかった過去の自分へ
genshun9
0
440
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
550
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
15
5.2k
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.9k
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
270
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
Welcome to the LLM Club
koic
0
170
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
72
4.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Faster Mobile Websites
deanohume
307
31k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Docker and Python
trallard
44
3.4k
For a Future-Friendly Web
brad_frost
179
9.8k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Language of Interfaces
destraynor
158
25k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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