What are lists in React Native?
Most mobile screens are lists — feeds, messages, search results. FlatList
renders long lists efficiently by virtualizing: only the rows near the viewport
exist at any moment. Getting lists right is central to an app that scrolls
smoothly.
Why it matters
Janky scrolling is the most noticeable performance problem on mobile, and lists are where it shows up. A poorly built list drops frames, stutters, and burns battery. Smooth 60fps lists are a hallmark of a quality app and a common source of real-world performance bugs.
What to learn
FlatListandSectionList- The
keyExtractorand stable keys renderItemand keeping it light- Virtualization and the windowing props
- Memoizing list items
- Pull-to-refresh and infinite scroll
- Measuring list performance
Common pitfall
Doing heavy work — expensive computation, inline functions, unmemoized
components — inside renderItem. It runs for every visible row on every scroll
frame, so any cost there multiplies into jank. Keep row rendering cheap, memoize
the item component, and move heavy work out of the render path.
Resources
Primary (free):
- React Native — Using a FlatList · docs
- React Native — Optimizing FlatList · docs
- React Native — Performance · docs
Practice
Render a list of several hundred items with FlatList, a stable keyExtractor,
and a memoized item component. Add pull-to-refresh and infinite scroll. Scroll
hard and watch for dropped frames, then fix any heavy work in renderItem. Done
when the list scrolls smoothly at length.
Outcomes
- Render long lists efficiently with
FlatList. - Use stable keys and memoized item components.
- Keep
renderItemcheap to avoid scroll jank. - Add pull-to-refresh and infinite scroll.