FlatList basics (data, renderItem, keyExtractor) in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the data prop in a FlatList?

The data prop provides the array of items that the FlatList will display. Each item in this array will be rendered as a list element.

beginner

Explain the role of the renderItem prop in FlatList.

The renderItem prop is a function that tells FlatList how to display each item. It receives an object with the item data and returns a React element to render.

beginner

Why do we use keyExtractor in FlatList?

The keyExtractor prop provides a unique key for each item in the list. This helps React Native track items efficiently and avoid rendering issues.

intermediate

What happens if you don't provide a keyExtractor in FlatList?

If keyExtractor is missing, FlatList tries to use the item index as the key, which can cause problems when items are added, removed, or reordered, leading to UI glitches.

intermediate

How does FlatList improve performance compared to ScrollView for long lists?

FlatList only renders items that are visible on the screen plus a small buffer, reducing memory use and improving performance. ScrollView renders all items at once, which can be slow for long lists.

What type of data does the data prop in FlatList expect?

A A number

B A single object

C A string

D An array of items

FlatList expects an array of items to render each as a list element.

Which prop defines how each item in FlatList is displayed?

A keyExtractor

B data

C renderItem

D style

renderItem is the function that returns the UI for each list item.

What does the keyExtractor function return?

A A unique string key for each item

B The item data itself

C The index number as a number

D The entire data array

keyExtractor returns a unique string key to help React identify each item.

If you omit keyExtractor, what key does FlatList use by default?

A No key

B Item index

C Item name

D Item id

FlatList uses the item index as the key if keyExtractor is not provided.

Why is FlatList preferred over ScrollView for long lists?

A FlatList renders only visible items, improving performance

B FlatList supports animations better

C ScrollView does not support scrolling

D FlatList uses less memory for images

FlatList renders only visible items plus a buffer, making it faster and less memory-heavy for long lists.

Describe how you would use data, renderItem, and keyExtractor together in a FlatList.

Think of data as your list of friends, renderItem as how you show each friend, and keyExtractor as giving each friend a name tag.

Explain why providing a unique key with keyExtractor is important in FlatList.

Imagine trying to find a friend in a crowd without name tags — it gets confusing!