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 {}.