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

Recall & Review

beginner

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

The keyExtractor prop provides a unique key for each item in the list. This helps React Native efficiently update and render only changed items, improving performance.

intermediate

Why should you avoid anonymous functions in FlatList's renderItem?

Using anonymous functions inside renderItem causes new functions to be created on every render, which can slow down the list. Instead, define the function outside or use useCallback to memoize it.

beginner

What does the initialNumToRender prop control in FlatList?

It controls how many items are rendered initially when the list loads. Setting it too high can slow startup, too low can cause blank space while scrolling.

intermediate

How does getItemLayout help optimize FlatList?

getItemLayout lets FlatList know the height and position of each item in advance. This avoids measuring on the fly and improves scroll performance.

intermediate

What is the benefit of using React.memo with FlatList item components?

React.memo prevents re-rendering of list items if their props haven't changed. This reduces unnecessary work and makes scrolling smoother.

Which prop helps FlatList identify each item uniquely for better performance?

A onEndReached

B initialNumToRender

C getItemLayout

D keyExtractor

keyExtractor provides unique keys for items, helping React Native optimize rendering.

What is a common cause of slow FlatList rendering related to renderItem?

A Not using <code>keyExtractor</code>

B Setting <code>initialNumToRender</code> too low

C Using anonymous functions inside <code>renderItem</code>

D Using <code>React.memo</code> on item components

Anonymous functions inside renderItem cause new functions each render, slowing performance.

How does getItemLayout improve FlatList performance?

A By pre-calculating item sizes and positions

B By rendering all items at once

C By disabling scrolling

D By caching images

getItemLayout lets FlatList skip measuring items dynamically, speeding up scroll.

What does initialNumToRender control?

A Number of items to skip rendering

B Number of items rendered initially

C Number of items to load on scroll end

D Number of items cached offscreen

initialNumToRender sets how many items FlatList renders when first shown.

Why use React.memo with FlatList items?

A To prevent unnecessary re-renders when props don't change

B To force re-render every time

C To increase initial render count

D To disable scrolling

React.memo helps skip re-rendering unchanged items, improving performance.

Explain how you would optimize a FlatList to improve scrolling performance in a React Native app.

Think about reducing unnecessary renders and helping FlatList know item sizes.

Describe the role of the keyExtractor and why it is important for FlatList optimization.

Keys help React know which items changed or stayed the same.