Open In App

When we use ScrollView over FlatList or vice-versa ?

Last Updated : 04 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In the landscape of mobile app development, the task of displaying lists of data is commonplace. Developers often find themselves contemplating whether to employ a ScrollView or a FlatList component for this purpose. Both ScrollView and FlatList are pivotal components in widely used frameworks like React Native, each presenting its unique benefits and applicability.

ScrollView:

The ScrollView Component is an inbuilt react-native component that serves as a generic scrollable container, with the ability to scroll child components and views inside it.

When to use ScrollView?

The ScrollView loads all content, meaning the data intended for display on the screen is loaded immediately after the component is initiated. Consequently, the entire content, represented by the data list, is mounted simultaneously. Therefore, using ScrollView is not recommended when confronted with a lengthy list of a hundred or a thousand items to be showcased on the screen. Its optimal use is reserved for scenarios where the data list is relatively short or of limited size.

Flatlist:

The FlatList Component is an inbuilt react-native component that displays similarly structured data in a scrollable list. It shows only those elements that are currently being displayed on the screen.

When to use FlatList?

In contrast to ScrollView, the FlatList exclusively renders elements that are currently visible on the screen, with the default setting typically displaying around 10 items. This characteristic ensures that the performance of the application remains unaffected. Consequently, utilizing the FlatList component is recommended when presenting an extensive list of data, as it efficiently handles the rendering process without compromising application performance.

Difference between ScrollView and Flatlist

ScrollView FlatList
It does not provide any memory management. It provides automatic memory management.
It loads all the content at once. It loads content as the window scrolled.
It results in slow rendering and increased memory usage. It does not affect the rendering speed. 
It maintains the component state. It does not maintain the component state.
It renders generic content in a scrollable container. It renders a list of similar items.
Can be imported from react native as: 
import {ScrollView} from ‘react-native’;
Can be imported from React Native as: 
import {FlatList} from ‘react-native’;

Similar Reads

When to use React.memo() over useMemo() & vice-versa ?
React provides us with powerful tools to optimize the performance of our applications. Two such tools are `React.memo()` and `useMemo()`, which serve similar yet distinct purposes. In this article, we'll explore when to use `React.memo()` over `useMemo()` and vice versa, along with syntax and code examples to illustrate their usage. Table of Conten
4 min read
In what scenarios might you choose Redux Thunk over Redux Saga, and vice versa?
Redux, a predictable state container utilized in JavaScript applications, is extensively employed in React applications to manage application state. Middleware libraries like Redux Thunk and Redux Saga are commonly integrated with Redux to handle side effects such as asynchronous API calls and intricate state transitions. While both offer solutions
4 min read
What is the use of FlatList ?
In this article, we are going to learn about the uses of the FlatList Component. So firstly let's know what is FlatListt?The FlatList component is an efficient way to display items in a scrollable list view. This component has many supported features such as Scroll Loading, header/footer views support, horizontal mode, pull to refresh, etc. Syntax:
5 min read
Converting JavaScript Arrays into CSVs and Vice-Versa
Converting Arrays into CSVs: Given an array in JavaScript and the task is to obtain the CSVs or the Comma Separated Values from it. Now, JavaScript being a versatile language provides multiple ways to achieve the task. Some of them are listed below. Using the toString() methodUsing valueof() MethodUsing the join() functionUsing the split() function
2 min read
How to Convert CSV to JSON file and vice-versa in JavaScript ?
CSV files are a common file format used to store data in a table-like manner. They can be particularly useful when a user intends to download structured information in a way that they can easily open and read on their local machine. CSV files are ideal for this because of their portability and universality. In this article, we will explain how to c
3 min read
How to Convert CFAbsoluteTime to Date Object and vice-versa in JavaScript ?
CFAbsolute time is a standard time format on Apple devices and programming languages like Swift. It stores the amount of nanoseconds since January 1, 2001. At its core, it is similar to epoch time, except it stores times closer to the modern day, using 2001 as a reference point rather than 1970. Here is Apple’s official documentation for CFAbsolute
2 min read
React Native FlatList Component
In this article, We are going to see how to create a FlatList in react-native. For this, we are going to use FlatList component. It is used to render the items in a scrollable list view. Syntax: <FlatList data={} renderItem={} /> Props in FlatList: renderItem: It is used to render the data into the list.data: It is basically an array of data.
4 min read
How to add Snap to alignment feature in FlatList in React Native ?
React Native is used to creating apps for Both Android and iOS platforms. It allows you to use a single codebase for both platforms. In React Native, the FlatList component shows similarly structured data in a scrollable list. It is the best option if you have a large list to render. FlatList component only renders those elements which are currentl
8 min read
What is the use of ScrollView component in React Native ?
In this article, we are going to learn about the uses of the ScrollView Component. So firstly let's know what is ScrollView? The ScrollView Component is an inbuilt react-native component that serves as a generic scrollable container, with the ability to scroll child components and views inside it. It provides the scroll functionality in both direct
8 min read
React Native ScrollView Component
The ScrollView Component is an inbuilt react-native component that serves as a generic scrollable container, with the ability to scroll child components and views inside it. It provides the scroll functionality in both directions- vertical and horizontal (Default: vertical). It is essential to provide the ScrollView Component with a bounded height
8 min read