FlatList optimization techniques in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

React Native

const MyList = () => {
  return (
    <FlatList
      data={data}
      keyExtractor={item => item.[1]
      renderItem={({item}) => <Text>{item.name}</Text>}
    />
  );
};

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

Aid

Bindex

Ckey

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using index as key can cause rendering issues when list changes.

Using a non-unique property causes duplicate keys.

The keyExtractor needs a unique id for each item to optimize rendering.

2fill in blank

medium

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

React Native

const RenderItem = React.memo(({item}) => {
  return <Text>{item.name}</Text>;
});

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

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

AItem

BView

CRenderItem

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain Text component causes all items to re-render.

Using a component not memoized loses optimization benefits.

Using React.memo wrapped component prevents unnecessary re-renders of list items.

3fill in blank

hard

Fix the error in FlatList by completing the missing prop to improve performance with large lists.

React Native

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

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

AonEndReachedThreshold={0.5}

Brefreshing={false}

Chorizontal={true}

DinitialNumToRender={10}

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated props does not fix initial rendering performance.

Not setting this prop can cause slow startup on big lists.

initialNumToRender controls how many items render initially, improving performance on large lists.

4fill in blank

hard

Fill both blanks to optimize FlatList by avoiding extra re-renders and improving scroll performance.

React Native

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

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

AremoveClippedSubviews

Brefreshing

CmaxToRenderPerBatch

DscrollEnabled

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing refreshing or scrollEnabled with performance props.

Not using these props can cause laggy scrolling.

removeClippedSubviews removes offscreen items to save memory, and maxToRenderPerBatch limits how many items render per batch for smooth scrolling.

5fill in blank

hard

Fill all three blanks to implement getItemLayout for fixed-height items to speed up FlatList scrolling.

React Native

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  getItemLayout={(data, index) => ({
    length: [1],
    offset: [2] * index,
    index: [3]
  })}
/>

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

A50

Blength

Cindex

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names instead of values for length and offset.

Not providing getItemLayout causes slower scroll performance.

getItemLayout helps FlatList calculate item positions quickly. Here, each item has fixed height 50, offset is 50 times index, and index is passed through.