Log) VirtualizedList (feat. ScrollView vs FlatList vs RecyclerListView 차이)

앱을 실행시키는 중 Log에 찍힌 수상한 메세지.

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components
that follow React performance best practices like PureComponent, shouldComponentUpdate, etc.

ScrollView

• 화면에 보이지않는 부분까지 모든 data를 렌더링한다
  (초기 렌더링 시간이 오래걸림)
• 많은 양의 data를 불러올 경우 버벅임, 렌더링 지연으로 빈 화면만 보일 수 있다
• 자식컴포넌트에서 크기 조절 가능

FlatList

• 화면에 보이는 부분까지 data를 렌더링한다
• 주로 API를 통해 많은 양의 data를 불러올때 사용
• 데이터를 처리하는 속도가 스크롤 내리는 속도를 따라가지 못해서 빈 화면만 보이거나 렌더링이 늦어진다
• Virtualized listview를 사용하는 FlatList는 보여지지 않는 부분에 대해서 단순 unmount를 시키는 것이므로, 많은 garbage collection을 야기한다

RecyclerListView

• 정해진 Layout Provider를 통해, 이를 재활용하여 Data를 렌더링 해주는 방식
• Component의 너비가 정확하게 주어질 수 있는 경우에, RecyclerListView는 viewport내에 존재하지 않은 컴포넌트를 새로 그려낼지, 혹은 기존의 View를 사용할지 결정

원인 및 해결방법

해당 페이지의 구성 요소(FlatList와 관련되지 않은 구성 요소 포함)에 대한 상태 변경이 있을 때마다 전체 FlatList 및 모든 해당 항목을 다시 렌더링하고 있음

초기 렌더링 후 FlatList는 한 번에 하나의 항목(변경되는 항목)만 렌더링해야 한다

useMemo() 훅 또는 infinite scroll 사용

---

참조 : https://stackoverflow.com/questions/44743904/virtualizedlist-you-have-a-large-list-that-is-slow-to-update

https://github.com/facebook/react-native/issues/13649

https://gorapaduck.tistory.com/entry/React-Native-ScrollView-vs-FlatList-vs-RecyclerListView