Skip to main content

Lists, Scroll Containers, and Refresh

Lists are one of the most important performance surfaces in React Native. Teams often reach for ScrollView too early, then hit rendering, memory, and interaction problems once real data arrives.

ScrollView​

ScrollView renders all children eagerly. Use it for:

  • short static content
  • settings pages
  • small forms
  • detail screens with bounded content

Avoid it for long or unbounded collections.

FlatList​

FlatList is the standard choice for most feed-like or repeated-content screens.

Use it when:

  • you have a long single-section list
  • item rendering can be expressed consistently
  • performance matters under growing data size

Key production concerns​

  • stable keyExtractor
  • bounded item layout where possible
  • controlled re-render patterns
  • empty, loading, and error states
  • pagination and end-of-list behavior

SectionList​

SectionList is appropriate when content is grouped into meaningful sections such as:

  • alphabetical indexes
  • grouped transactions
  • schedule blocks
  • categorized settings

Use it when grouping is part of the UX, not just as an internal data detail.

VirtualizedList​

VirtualizedList is a lower-level primitive used when the default list helpers are not enough. Most product teams should not need it directly unless they are building advanced infrastructure or highly custom list behavior.

RefreshControl​

RefreshControl gives pull-to-refresh semantics, but it should only be used when:

  • refresh meaning is obvious to the user
  • the backend supports refetch semantics cleanly
  • refresh state is distinct from initial loading

Do not treat pull-to-refresh as a substitute for clear sync or retry design.

Performance rules​

  • Prefer FlatList or SectionList over ScrollView for long collections.
  • Keep row components focused and memoization strategy intentional.
  • Avoid expensive inline logic in renderItem.
  • Standardize image and text truncation inside list rows.
  • Measure scroll performance on low-end devices, not just development simulators.

Team rule​

Collection components should be chosen by data size, update frequency, and interaction design. The wrong list container creates performance debt faster than almost any other UI choice.

Use this page with Performance and Touchables and Pressable.