FlashList 왜 사용할까?

Tags
 

FlashList 선택 배경

  • React-Native의 FlatList는 원하는 만큼 충분한 성능을 제공하지 못했다.
    • 공식문서에 있는 최적화 방안을 적용 했음에도 완전히 만족스럽진 않았다.
    • Native 요소를 Base로 하여 구현되었다.
  • RecyclerListView는 성능 면에서는 아주 우수하지만, API 사용이 쉽지 않다.
    • 오로지 JS로만 구현되었다.
  • Shopify에서 이 둘의 장점만 결합시킨 오픈소스 라이브러리인 FlashList를 공개했다.
    • 인터페이스는 FlatList와 유사하게 유지
    • 내부 기능은 RecyclerListView를 기반으로 하여 성능을 끌어올린다.

렌더 성능 우수

공식 문서에서는 JS thread에선 10배, UI thread에 선 5배나 성능이 더 뛰어나다고 한다.
notion image
notion image

메모리 효율적 사용

모든 것을 memo 해서 다 저장해 놓는 방식이 아니다.
일부 컴포넌트만 선언 해두고, 프로퍼티만 변경하여 리렌더링 시키는 방식임.
따라서 콘텐츠 수가 비약적으로 증가하더라도 일정 범위 내의 메모리만 소모하며, 따라서 다른 라이브러리들에 비해 메모리 측면에서도 좀 더 최적화가 되어있다고 볼 수 있다.
⚠️
렌더링 했던 요소들을 모두 memoizing 하는 것이 아니므로, 이미 렌더링 했던 요소들도 다시 보는 시점에는 리렌더링을 통해 보여주게 되며, 설정에 따라 blank 화면을 보게될 수도 있다.
notion image