FlatList performance optimization in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of using FlatList in React Native?

FlatList efficiently renders large lists by rendering only visible items plus a small buffer, improving app performance and memory usage.

beginner

Why should you provide a keyExtractor prop to a FlatList?

The keyExtractor helps React Native identify each item uniquely, enabling efficient updates and preventing unnecessary re-renders.

intermediate

What does the initialNumToRender prop control in FlatList?

It controls how many items FlatList renders initially, helping balance startup speed and smooth scrolling.

intermediate

How does using getItemLayout improve FlatList performance?

Providing getItemLayout lets FlatList calculate item positions without measuring, speeding up scroll and jump-to-index actions.

advanced

What is the benefit of memoizing the renderItem function in FlatList?

Memoizing renderItem prevents unnecessary re-renders of list items, improving scroll performance and reducing CPU work.

Which FlatList prop helps avoid re-rendering items by providing a unique identifier?

A onEndReached

B initialNumToRender

C getItemLayout

D keyExtractor

The keyExtractor prop provides a unique key for each item, helping React Native optimize rendering.

What does setting initialNumToRender to a low number do?

A Renders fewer items initially to speed up startup

B Disables scrolling

C Renders all items at once

D Increases memory usage

Setting initialNumToRender low renders fewer items initially, improving startup speed but may cause blank space during fast scroll.

How does getItemLayout improve FlatList behavior?

A By disabling scrolling

B By rendering items in reverse order

C By pre-calculating item sizes and positions

D By increasing item padding

getItemLayout lets FlatList know item sizes and positions upfront, speeding up scroll and jump actions.

Why is memoizing renderItem useful in FlatList?

A It disables item rendering

B It prevents unnecessary re-renders of list items

C It increases the number of items rendered

D It changes item colors

Memoizing renderItem avoids re-rendering items when props haven't changed, improving performance.

Which prop triggers loading more data when the user scrolls near the end of the list?

A onEndReached

B keyExtractor

C initialNumToRender

D getItemLayout

onEndReached is called when the user scrolls near the end, useful for loading more data.

Explain how you can optimize FlatList performance when rendering a large list of items.

Think about how FlatList renders items and how to reduce work during scrolling.

Describe the role of getItemLayout in FlatList and when you should use it.

Consider how FlatList measures items during scrolling.