FlatList basics (data, renderItem, keyExtractor) in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this FlatList display?

Consider this React Native FlatList component. What text will appear on the screen?

React Native

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

const data = [{id: '1', name: 'Apple'}, {id: '2', name: 'Banana'}];

export default function App() {
  return (
    <View>
      <FlatList
        data={data}
        keyExtractor={item => item.id}
        renderItem={({item}) => <Text>{item.name}</Text>}
      />
    </View>
  );
}

A The screen shows an error because renderItem is missing.

B The screen shows two lines: '1' and '2'.

C The screen is blank because keyExtractor is missing.

D The screen shows two lines: 'Apple' and 'Banana'.

💡 Hint

Look at what renderItem returns for each item.

FlatList uses the data array and for each item calls renderItem, which returns a Text component showing item.name. So it displays 'Apple' and 'Banana'.

📝 Syntax

intermediate

Which keyExtractor is correct?

You want to use FlatList with this data: [{key: 'a'}, {key: 'b'}]. Which keyExtractor function will NOT cause a warning or error?

A keyExtractor={item => item.key}

B keyExtractor={item => item.id}

C keyExtractor={item => item}

D keyExtractor={item => item.toString()}

💡 Hint

The keyExtractor must return a string that exists in each item.

Each item has a 'key' property, so keyExtractor should return item.key. Using item.id will be undefined and cause warnings.

❓ lifecycle

advanced

What happens if keyExtractor returns non-unique keys?

If FlatList's keyExtractor returns the same key for multiple items, what is the likely result?

A FlatList will render all items correctly with no issues.

B FlatList will automatically fix keys to be unique.

C FlatList will show a warning and may render items incorrectly or skip updates.

D FlatList will crash the app immediately.

💡 Hint

Keys must be unique to help React identify items.

Non-unique keys cause React to confuse items, leading to warnings and rendering bugs.

🔧 Debug

advanced

Why does this FlatList show blank screen?

This FlatList code shows a blank screen. What is the problem? const data = [{id: '1', title: 'One'}, {id: '2', title: 'Two'}]; item.id} renderItem={() => {item.title}} />

A data array is empty, so nothing renders.

B renderItem does not receive 'item' parameter, so item.title is undefined.

C keyExtractor returns wrong keys causing blank screen.

D FlatList requires a style prop to show content.

💡 Hint

Check how renderItem receives its argument.

renderItem must destructure or access the item from its argument. Here, renderItem has no parameter, so item is undefined.

🧠 Conceptual

expert

Why use keyExtractor instead of index as key?

Why is it better to use a unique id in keyExtractor instead of the item index as key in FlatList?

A Using unique ids prevents rendering bugs when list items change order or are added/removed.

B Using index as key improves performance and prevents bugs.

C Using index as key is required by FlatList and unique ids cause errors.

D Using unique ids makes FlatList slower and less efficient.

💡 Hint

Think about what happens when list items reorder.

Keys help React track items. Using stable unique ids avoids bugs when items reorder or change. Index keys cause wrong item reuse.