FlatList performance optimization in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

FlatList initial rendering behavior

What will be the visible number of items rendered initially by this FlatList component?

import React from 'react'; import { FlatList, Text } from 'react-native'; const data = Array.from({ length: 100 }, (_, i) => ({ id: i.toString(), value: `Item ${i}` })); export default function MyList() { return ( {item.value}} keyExtractor={item => item.id} initialNumToRender={10} /> ); }

React Native

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

const data = Array.from({ length: 100 }, (_, i) => ({ id: i.toString(), value: `Item ${i}` }));

export default function MyList() {
  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item.value}</Text>}
      keyExtractor={item => item.id}
      initialNumToRender={10}
    />
  );
}

A 10 items are rendered initially on screen

B No items are rendered until user scrolls

C Only 1 item is rendered initially

D All 100 items are rendered initially

💡 Hint

Look at the initialNumToRender prop value.

The initialNumToRender prop controls how many items FlatList renders initially. Here it is set to 10, so 10 items appear on screen first.

❓ lifecycle

intermediate

Effect of extraData on FlatList re-render

What happens when the extraData prop changes in a FlatList?

Consider this snippet:
<FlatList data={items} extraData={selectedId} renderItem={({ item }) => <Item selected={item.id === selectedId} />} keyExtractor={item => item.id} />

What is the effect of changing selectedId?

A FlatList re-renders the entire list including off-screen items

B FlatList ignores extraData and does not re-render

C FlatList crashes due to extraData prop

D FlatList re-renders all visible items to reflect the new selection

💡 Hint

extraData tells FlatList to re-render when it changes.

extraData is used to tell FlatList to re-render when some external data changes. Here, changing selectedId causes visible items to update their selected state.

🔧 Debug

advanced

Identifying cause of FlatList lag on scroll

A FlatList scrolls slowly and lags on a device. Which of these is the most likely cause?

Options:
A) Using anonymous functions inside renderItem
B) Setting initialNumToRender to 5
C) Using keyExtractor with unique keys
D) Using getItemLayout for fixed item height

A Setting initialNumToRender to a low number causing slow rendering

B Using anonymous functions inside renderItem causing re-creation on each render

C Using keyExtractor with unique keys causing key conflicts

D Using getItemLayout for fixed item height causing layout errors

💡 Hint

Think about what causes unnecessary re-renders.

Anonymous functions inside renderItem cause new function instances on every render, leading to performance issues and lag.

🧠 Conceptual

advanced

Purpose of getItemLayout in FlatList

Why would you use the getItemLayout prop in a FlatList?

Choose the best explanation.

A To customize the rendering of each item based on its index

B To dynamically load more items when scrolling near the end

C To provide fixed height and offset info for each item to improve scroll performance

D To disable scrolling when the list is empty

💡 Hint

Think about how FlatList calculates scroll positions.

getItemLayout lets FlatList know the height and offset of items upfront, so it can jump to positions and render efficiently without measuring on the fly.

❓ navigation

expert

Maintaining scroll position after data update

You update the data array of a FlatList by prepending new items at the start. What is the best way to keep the user’s scroll position stable so the visible content does not jump?

Options:

A Use maintainVisibleContentPosition prop with appropriate minIndex and autoscrollToTop false

B Reset scroll position to 0 manually after data update

C Use extraData prop to force re-render

D Call scrollToEnd after updating data

💡 Hint

Think about props designed to keep scroll stable on prepending data.

maintainVisibleContentPosition helps FlatList keep the visible content stable when new items are added at the start, preventing jumpy scroll.