Theory

FlatList and SectionList are components in React Native used for rendering lists of data. Both components are efficient for handling large lists and are optimized for performance. The key difference lies in how they handle data and their use cases.

FlatList

Why Use FlatList

• Dynamic Data Rendering: Ideal for rendering large sets of dynamic data efficiently. Renders only the items that are currently visible on the screen, ensuring performance;
• Memory Efficiency: Memory-efficient as it doesn't load the entire dataset into memory at once;
• Lazy Loading: Implements lazy loading, meaning it only loads the data needed for the visible items.

Working with FlatList

• data: An array of data to be rendered;
• renderItem: A function that renders an individual item;
• keyExtractor: A function to extract a unique key for each item;
• onEndReached (optional): A callback function that is called when the end of the list is reached;
• onRefresh (optional): A callback function that is called when the user pulls the list down to refresh it.

Example

Result

SectionList

Why Use SectionList

• Organized Data: Useful when the data naturally falls into sections (e.g., categories, dates). Each section can have its own header;
• Improved Readability: Provides a structured and organized way to present data, improving readability;
• Dynamic Sections: Allows dynamic updates to both sections and data, making it suitable for dynamic content;
• Customizable Headers: Supports custom section headers through the renderSectionHeader prop.

Working with SectionList

• sections: An array of sections, where each section has a data array and optional renderItem and renderSectionHeader functions;
• renderItem: A function that renders an individual item;
• renderSectionHeader: A function that renders the section header;
• keyExtractor: A function to extract a unique key for each item;
• onEndReached (optional): A callback function that is called when the end of the list is reached;
• onRefresh (optional): A callback function that is called when the user pulls the list down to refresh it.

Example

Result

In Practice