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.

Practice

1. What is the main purpose of using FlatList in React Native?

easy

A. To efficiently render long lists by only rendering visible items

B. To create complex animations for list items

C. To handle user authentication in the app

D. To manage app navigation between screens

Solution

1. Step 1: Understand FlatList's role

   FlatList is designed to render lists efficiently by only rendering items visible on the screen.

2. Step 2: Compare options

   The other options describe unrelated features like animations, authentication, and navigation.

3. Final Answer:

   To efficiently render long lists by only rendering visible items -> Option A

4. Quick Check:

   FlatList optimizes rendering = A [OK]

Hint: FlatList renders only visible items for performance [OK]

Common Mistakes:

• Thinking FlatList handles navigation
• Confusing FlatList with animation libraries
• Assuming FlatList manages user login

2. Which of the following is the correct way to provide a fixed height for each item in a FlatList using getItemLayout?

easy

A. getItemLayout={(data, index) => ({length: index, offset: 50, index})}

B. getItemLayout={(data, index) => ({length: 50, offset: index, index})}

C. getItemLayout={(data, index) => ({length: 50, offset: 50 * index, index})}

D. getItemLayout={(data, index) => ({length: 50, offset: 50 + index, index})}

Solution

1. Step 1: Understand getItemLayout parameters

   getItemLayout expects an object with length (item size), offset (distance from start), and index.

2. Step 2: Calculate offset correctly

   Offset should be item height multiplied by index to position items correctly.

3. Final Answer:

   getItemLayout={(data, index) => ({length: 50, offset: 50 * index, index})} -> Option C

4. Quick Check:

   Offset = item height * index = B [OK]

Hint: Offset equals item size times index in getItemLayout [OK]

Common Mistakes:

• Using index as offset directly
• Adding index to offset instead of multiplying
• Swapping length and offset values

3. Given this FlatList snippet, what will be the initial number of items rendered on screen?

  <FlatList
    data={data}
    renderItem={({item}) => <Text>{item}</Text>}
    initialNumToRender={5}
  />

medium

A. 5 items

B. All items in data

C. 10 items

D. No items until scrolled

Solution

1. Step 1: Understand initialNumToRender prop

   This prop controls how many items FlatList renders initially on screen.

2. Step 2: Check the value given

   initialNumToRender is set to 5, so FlatList renders 5 items first.

3. Final Answer:

   5 items -> Option A

4. Quick Check:

   initialNumToRender = 5 means 5 items rendered initially [OK]

Hint: initialNumToRender sets initial visible items count [OK]

Common Mistakes:

• Assuming all items render at once
• Confusing initialNumToRender with maxToRenderPerBatch
• Thinking no items render until scroll

4. Identify the error in this FlatList usage that causes slow scrolling:

  <FlatList
    data={items}
    renderItem={({item}) => <Text>{item.name}</Text>}
    keyExtractor={(item) => item.id}
    removeClippedSubviews={false}
  />

medium

A. renderItem should return a View, not Text

B. keyExtractor should return index instead of item.id

C. data prop should be an object, not an array

D. removeClippedSubviews should be true to improve performance

Solution

1. Step 1: Understand removeClippedSubviews effect

   Setting removeClippedSubviews to true helps FlatList remove off-screen items from memory, improving scroll performance.

2. Step 2: Analyze current setting

   Currently, removeClippedSubviews is false, which can cause slow scrolling due to extra memory use.

3. Final Answer:

   removeClippedSubviews should be true to improve performance -> Option D

4. Quick Check:

   removeClippedSubviews true improves scroll speed [OK]

Hint: Enable removeClippedSubviews for better scroll performance [OK]

Common Mistakes:

• Ignoring removeClippedSubviews prop
• Using index as keyExtractor causing re-renders
• Thinking renderItem must return View only

5. You have a FlatList with 1000 items of fixed height 60. To optimize scrolling performance, which combination of props should you use?

hard

A. initialNumToRender=50, maxToRenderPerBatch=50, windowSize=10, getItemLayout missing

B. initialNumToRender=10, maxToRenderPerBatch=10, windowSize=5, getItemLayout provided

C. initialNumToRender=1, maxToRenderPerBatch=1, windowSize=1, getItemLayout missing

D. initialNumToRender=1000, maxToRenderPerBatch=1000, windowSize=20, no getItemLayout

Solution

1. Step 1: Use getItemLayout for fixed height items

   Providing getItemLayout lets FlatList calculate item positions quickly, improving scroll speed.

2. Step 2: Choose reasonable rendering batch sizes

   initialNumToRender=10 and maxToRenderPerBatch=10 balance initial load and batch rendering without overloading memory.

3. Step 3: Set windowSize to control offscreen rendering

   windowSize=5 keeps a small buffer of items rendered outside viewport for smooth scrolling.

4. Final Answer:

   initialNumToRender=10, maxToRenderPerBatch=10, windowSize=5, getItemLayout provided -> Option B

5. Quick Check:

   Balanced props + getItemLayout = D [OK]

Hint: Use getItemLayout with balanced batch sizes for big lists [OK]

Common Mistakes:

• Rendering all items at once causing lag
• Missing getItemLayout for fixed height items
• Setting windowSize too large or too small