Lists and Keys
Rendering lists of data is one of the most common tasks in mobile app development. This tutorial explains how to render lists in React Native and why keys are essential for performance and correctness.
Rendering Lists with map()
The most basic way to render a list of items is by using the JavaScript map() function to transform an array of data into an array of JSX elements.
Why Keys Matter
Keys help React identify which items have changed, been added, or been removed from a list. Without proper keys, React may re-render items incorrectly or inefficiently.
Using Unique IDs as Keys
Whenever possible, use a stable, unique identifier from your data, such as a database ID, instead of the array index, especially for lists that can be reordered or filtered.
Why Avoid Using Index as Key
Using the array index as a key can cause bugs when the list order changes, since React may incorrectly associate state with the wrong item after reordering, adding, or removing elements.
Using FlatList for Performance
For large or scrollable lists, React Native recommends using the FlatList component instead of map(), since FlatList only renders items currently visible on screen, greatly improving performance.
Conclusion
Rendering lists correctly with proper keys ensures optimal performance and prevents subtle rendering bugs in React Native applications. For any large or dynamic dataset, prefer FlatList over manually mapping arrays with basic View components.
