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
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
940
努力家なスクラムマスターが陥る「傍観者」という罠と乗り越えた先に信頼があった話 / 20250830 Takahiro Sasaki
shift_evolve
PRO
2
130
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
350
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
240
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
140
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
2
1.5k
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
7
840
衝突して強くなる! BLUE GIANTと アジャイルチームの共通点とは ― いきいきと活気に満ちたグルーヴあるチームを作るコツ ― / BLUE GIANT and Agile Teams
naitosatoshi
0
280
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
13
4k
まだ間に合う! StrandsとBedrock AgentCoreでAIエージェント構築に入門しよう
minorun365
PRO
10
680
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
4
990
Grafana Meetup Japan Vol. 6
kaedemalu
1
190
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
A Modern Web Designer's Workflow
chriscoyier
696
190k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Practical Orchestrator
shlominoach
190
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
The Pragmatic Product Professional
lauravandoore
36
6.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
790
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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