Performance & Optimization

Lists and Rendering

FlatList virtualizes rows—provide keyExtractor, getItemLayout when row heights fixed, and memoize renderItem with React.memo child components.

Avoid anonymous functions in renderItem when possible; pass stable callbacks from useCallback.

FlashList from Shopify offers faster recycling for very long feeds when FlatList bottlenecks.

• Never use ScrollView with map for hundreds of rows
• Use removeClippedSubviews cautiously on Android
• Profile JS thread vs UI thread in Performance Monitor

<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <ProductRow product={item} />}
  initialNumToRender={10}
  windowSize={5}
/>

Bundle and Memory

Enable Hermes for smaller bundles and faster parse. Analyze bundle with react-native-bundle-visualizer.

Release image assets at appropriate resolutions; use WebP where supported. Clear timers and subscriptions on unmount.

Use InteractionManager.runAfterInteractions to defer non-critical work until animations complete.

• Split infrequent screens with lazy require where viable
• Avoid storing large JSON blobs in global state
• Monitor OOM crashes in production crash reporting