FlatList performance optimization in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a unique key for each FlatList item.

React Native

const MyList = () => {
  const data = [{id: '1'}, {id: '2'}];
  return <FlatList data={data} keyExtractor={item => item[1] renderItem={({item}) => <Text>{item.id}</Text>} />;
};

Drag options to blanks, or click blank then click option'

A.name

B.key

C.value

D.id

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-unique property for keyExtractor causes rendering issues.

Forgetting to provide a keyExtractor leads to warnings.

The keyExtractor should return a unique string key for each item. Using item.id is standard when items have an id property.

2fill in blank

medium

Complete the code to avoid re-rendering items unnecessarily by using React.memo.

React Native

const Item = React.memo(({title}) => {
  return <Text>{title}</Text>;
});

const MyList = () => {
  const data = [{id: '1', title: 'One'}, {id: '2', title: 'Two'}];
  return <FlatList data={data} renderItem={({item}) => <[1] title={item.title} />} keyExtractor={item => item.id} />;
};

Drag options to blanks, or click blank then click option'

AText

BItem

CView

DFlatList

Attempts:

3 left

💡 Hint

Common Mistakes

Using the FlatList component inside renderItem causes errors.

Not memoizing item components leads to performance issues.

Wrapping the item component with React.memo prevents unnecessary re-renders when props don't change.

3fill in blank

hard

Fix the error in the FlatList by providing the correct prop to optimize item height.

React Native

<FlatList data={data} renderItem={renderItem} keyExtractor={item => item.id} [1]={50} />

Drag options to blanks, or click blank then click option'

AmaxToRenderPerBatch

BinitialNumToRender

CgetItemLayout

DwindowSize

Attempts:

3 left

💡 Hint

Common Mistakes

Using initialNumToRender instead of getItemLayout for fixed height optimization.

Not providing getItemLayout causes slow scroll on large lists.

getItemLayout helps FlatList calculate item positions efficiently when item height is fixed, improving scroll performance.

4fill in blank

hard

Fill both blanks to limit how many items FlatList renders initially and per batch.

React Native

<FlatList data={data} renderItem={renderItem} keyExtractor={item => item.id} initialNumToRender=[1] maxToRenderPerBatch=[2] />

Drag options to blanks, or click blank then click option'

A10

B5

C20

D15

Attempts:

3 left

💡 Hint

Common Mistakes

Setting initialNumToRender higher than maxToRenderPerBatch causes confusion.

Using too high values can hurt performance on low-end devices.

Setting initialNumToRender to 5 and maxToRenderPerBatch to 10 controls rendering workload for better performance.

5fill in blank

hard

Fill all three blanks to memoize the renderItem function and avoid inline functions.

React Native

const renderItem = React.[1](({item}) => <Item title={item.title} />);

const MyList = () => {
  const data = [{id: '1', title: 'One'}, {id: '2', title: 'Two'}];
  return <FlatList data={data} renderItem={renderItem} keyExtractor={item => item.id} extraData=[2] />;
};

const extraData = React.useState([3])[0];

Drag options to blanks, or click blank then click option'

AuseCallback

BextraData

C{}

DuseMemo

Attempts:

3 left

💡 Hint

Common Mistakes

Using useMemo instead of useCallback for functions.

Not passing extraData causes FlatList to skip updates.

useCallback memoizes the renderItem function to prevent re-creation on each render. extraData prop tells FlatList to re-render when extraData changes. Initializing extraData as an empty object {}.

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