FlatList optimization techniques in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

FlatList keyExtractor usage

What is the main purpose of the keyExtractor prop in a FlatList component?

A To specify the style of each list item

B To handle item press events

C To define the number of items to render initially

D To provide a unique key for each item to improve list rendering performance

💡 Hint

Think about how React Native identifies each item in a list.

The keyExtractor prop tells FlatList how to uniquely identify each item. This helps React Native optimize rendering by tracking items efficiently.

❓ lifecycle

intermediate

FlatList and extraData prop

Why should you use the extraData prop in FlatList when your list depends on external state?

A To set the maximum number of items to display

B To force FlatList to re-render when the external state changes

C To style the FlatList container

D To disable scrolling

💡 Hint

Think about how FlatList knows when to update its items.

The extraData prop tells FlatList to watch for changes in external data and re-render the list accordingly.

🔧 Debug

advanced

FlatList performance issue with inline functions

What problem can arise if you pass an inline arrow function to the renderItem prop of FlatList?

React Native

renderItem={({ item }) => <Text>{item.name}</Text>}

A It disables item selection

B It causes a syntax error

C It causes FlatList to re-render all items unnecessarily, hurting performance

D It prevents the list from scrolling

💡 Hint

Consider how React Native compares functions between renders.

Passing inline functions creates a new function on every render, causing FlatList to think items changed and re-render them all.

🧠 Conceptual

advanced

Using getItemLayout for FlatList optimization

How does implementing the getItemLayout prop improve FlatList performance?

A It allows FlatList to skip measurement of item sizes and jump directly to any item

B It changes the background color of list items

C It disables lazy loading of items

D It automatically sorts the list items

💡 Hint

Think about how FlatList calculates scroll positions.

Providing getItemLayout lets FlatList know each item's size and position, so it can quickly scroll to items without measuring them dynamically.

❓ navigation

expert

FlatList and navigation performance

When navigating between screens with FlatList, what is a recommended way to preserve FlatList scroll position and avoid re-rendering all items?

A Use React Navigation's <code>useFocusEffect</code> to save and restore scroll offset manually

B Always unmount FlatList when leaving the screen

C Disable FlatList virtualization

D Use inline functions for renderItem to force re-render

💡 Hint

Think about how to keep UI state when switching screens.

Using useFocusEffect allows you to save the scroll position when leaving and restore it when returning, preventing full re-renders and improving user experience.