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
840
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
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
230
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
150
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
210
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
230
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
240
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
350
20251010_HCCJP_AdaptiveCloudUpdates
sdosamut
0
140
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
1
250
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
200
React19.2のuseEffectEventを追う
maguroalternative
2
500
Featured
See All Featured
It's Worth the Effort
3n
187
28k
Documentation Writing (for coders)
carmenintech
75
5.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
KATA
mclloyd
PRO
32
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Practical Orchestrator
shlominoach
190
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
910
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
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