FlatList vs SectionList in React Native- Choosing the Right List Component for Your App

Introduction

In React Native, efficiently displaying big data lists is critical for offering a smooth and responsive user experience. FlatList and SectionList are two prominent list rendering components in React Native. This article will compare FlatList and SectionList, explore their use cases, and help you determine which is best for your project. Let's get started without further ado,

FlatList in React Native 

FlatList is a high-performance, simple-to-use, and versatile scrolling list component that renders a long list of items in a performant and memory-efficient manner. It is best suited for simple, homogeneous lists when the data structure does not require grouping or categorization.

SectionList in React Native

SectionList is a scrolling list component specifically developed for showing sectioned or grouped data. It is helpful for use cases where data must be categorized or divided into parts, such as an address book, a dictionary, or a settings menu.

Difference between FlatList vs SectionList
 

Features	FlatList	SectionList
Purpose	Rendering simple lists	Rendering grouped/sectioned lists
Ease of implementation	Simple and straightforward	Slightly more complex
Data structure	Flat array	Nested array with sections
Headers	Not available	Section headers (sticky)
Initial scroll position	initialScrollIndex prop	Not available
Built-in functionality	Pull-to-refresh, infinite scrolling	Pull-to-refresh, infinite scrolling

FlatList Example in React Native

This FlatList example is a simple React Native application that displays a list of Indian cities. The indianCities array comprises city objects with id and name properties. The FlatList component accepts this data and iterates through it using the renderItem parameter.

import { View, Text, FlatList, StyleSheet } from 'react-native'
import React from 'react'




const indianCities = [
  {id: 1, name: "Kolkata"},
  {id: 2, name: "Delhi"},
  {id: 3, name: "Patna"},
  {id: 4, name: "Hyderabad"},
  {id: 5, name: "Nagpur"},
  {id: 6, name: "Mumbai"},
  {id: 7, name: "Indore"},
  {id: 8, name: "Pune"},
  {id: 9, name: "Chennai"},
  {id: 10, name: "Surat"}
];


export default function App() {
  return (
    <FlatList
      keyExtractor={(item) => item.id.toString()}
      data={indianCities}
      renderItem={(({item})=>(
          <View style={styles.itemContainer}>
             <Text style={styles.textStyle}>{item.name}</Text>
          </View>
      ))}
    />
  )
}


const styles = StyleSheet.create({
  itemContainer: {
    backgroundColor: 'lightgreen',
    padding: 20,
    margin: 8,
    borderRadius: 4,
  },
  textStyle: {
    fontWeight: 'bold',
    fontSize: 20,
    color: 'black',
    letterSpacing: 1,
  }
})

SectionList Example in React Native 

This SectionList example is a React Native application that presents Indian states and their prominent cities in a logical and organized manner. The indianStateAndTheirFamousCities array comprises objects with a title property representing the state name and a data property representing city names.

import { View, Text, SectionList, StyleSheet} from 'react-native'
import React from 'react'


const indianStateAndTheirFamousCities = [
  {
    title: "West Bengal",
    data: ["Howrah","Kolkata", "Siliguri", "Darjeeling", "Durgapur"]
  },
  {
    title: "Bihar",
    data: ["Patna","Gaya", "Darbhanga", "Bhagalpur", "Nalanda"]
  },
  {
    title: "Uttar Pradesh",
    data: ["Agra","Lucknow", "Prayagraj", "Varanasi", "Jhansi", "Mathura", "Nodia"]
  },
  {
    title: "Tamilnadu",
    data: ["Coimbatore","Madurai", "Chennai", "Tirunelveli", "Thanjavur"]
  },
  {
    title: "Maharashtra",
    data: ["Mumbai","Nashik", "Pune", "Nagpur", "Aurangabad"]
  },
  {
    title: "Telangana",
    data: ["Hyderabad","Warangal"]
  },


];


export default function App() {
  return (
    <View>
      <SectionList
        keyExtractor={(item, index) => item+index}
        sections={indianStateAndTheirFamousCities}
        renderItem={({item}) => (
          <Text style={styles.itemTextStyle}>{item}</Text>
        )}
        renderSectionHeader={({section:{title}}) => (
          <Text style={styles.headertext}>{title}</Text>
        )
      }
      />
    </View>
  )
}


const styles = StyleSheet.create({
  headertext: {
    fontSize: 25,
    fontWeight: "bold",
    color: 'black',
    margin: 5,
    letterSpacing: 1,
  },
  itemTextStyle: {
    fontSize: 16,
    fontWeight: "bold",
    backgroundColor: "green",
    margin: 8,
    padding: 12,
    color: 'white',
    letterSpacing: 1,
    borderRadius: 4,
  }
})

Conclusion

Your use case and data structure determine the choice between FlatList and SectionList. FlatList is preferable if you have a simple, homogeneous list that does not require grouping or categorization. However, if your data is organized into sections or categories, SectionList provides an effective and straightforward way to show sectioned data. Happy coding!