VirtualizedList: The Engine Behind React Native Lists
VirtualizedList is the engine behind React Native's efficient lists, rendering only visible items to save memory. Use it when FlatList isn't flexible enough, like for immutable data. The main footgun: component state is lost when items scroll out of view.
Why it exists
Rendering a list with thousands of items by creating a component for every single one would crash most apps due to excessive memory usage and slow performance. VirtualizedList solves this by only rendering what's necessary for a smooth user experience, making long lists feasible on mobile devices.
The mental model
Think of VirtualizedList as a film projector. The projector only illuminates a single frame at a time (the "render window"), even though the entire film reel (your data) exists. As you scroll, new frames are brought into the light and old ones return to darkness. This saves the "energy" (memory and CPU) of rendering everything at once.
How it works
VirtualizedList maintains a finite render window of items. It renders components for items inside this window and replaces everything outside with blank views of the appropriate size to keep the scrollbar accurate. Unlike FlatList, which assumes a simple array, VirtualizedList is generic. You must provide it with getItem and getItemCount functions to tell it how to access an item at a given index and how many items exist. This allows it to work with any data structure, like an immutable list or paged API data.
When to use it
Use VirtualizedList directly when FlatList or SectionList are too restrictive. The primary use case is when your data is not a simple array. For example, if you're using a library like Immutable.js, you can provide custom getItem and getItemCount functions to interface with your data structure. It offers maximum flexibility at the cost of more boilerplate code.
When not to use it
For most common cases, prefer FlatList or SectionList. These components are convenience wrappers around VirtualizedList that are optimized for simple arrays and are much easier to use. If your data is in an array, using VirtualizedList directly is just reinventing the functionality that FlatList already provides.
One canonical example
A common footgun is UI not updating. VirtualizedList is a PureComponent, meaning it only re-renders if its props change. If your renderItem function depends on parent state that isn't passed as a prop, your items won't update. To fix this, pass any external dependencies into the extraData prop. When extraData changes, the list knows it needs to re-render its items. For example, if a selectedItemId state in the parent component affects item styling, you must pass extraData={selectedItemId} to the list.
Interview question
What is the primary reason to use React Native's VirtualizedList directly instead of FlatList?
- a.To ensure that component state is preserved for all items, even when they scroll out of view.
- b.When the data source is structured as something other than a standard JavaScript array.Correct
- c.To completely bypass the need for a renderItem prop by providing raw data.
- d.To achieve significantly faster initial render times for very long lists.
Why? this is the answer
The card explicitly states that the primary use case for VirtualizedList directly is when your data is not a simple array, offering flexibility that FlatList lacks. Option A describes a common 'footgun' where component state is actually lost when items scroll out of view.
Just read this? Test yourself on what you have been reading.
Read the original → reactnative.dev
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react native — each one lists the topics its interview covers.
See open roles