React Native Performance

Priority: P0 (CRITICAL)

Tune FlatList for 60fps

• windowSize

  : Reduce to 5-10 for memory-heavy lists (default 21).

  initialNumToRender

  should cover first viewport.

• getItemLayout

  : Provide for fixed-height items. Skips runtime measurement.

• removeClippedSubviews

  : Enable for Android (default true) to offload clipped items.

• maxToRenderPerBatch

  : Limit to 5-10 items per frame to prevent JS thread blockage.

• keyExtractor

  : Use stable unique IDs, never array index.

See optimization guide for FlatList configuration examples with

getItemLayout

,

windowSize

, and memoization patterns.

Accelerate Core Rendering

• ** Engine**: Ensure Hermes engine enabled (default in 0.7x). Verify via

  global.HermesInternal

  .
• Animations: Use Native Driver (

  useNativeDriver: true

  ) or Reanimated 3 for GPU-accelerated 60fps animations.
• Re-renders: Use

  React.memo

  and

  useMemo

  for expensive props. Profile via Flipper (React DevTools) for flamegraphs.
• Network: Batch API calls. Use React Query/Zustand to prevent unnecessary screen refreshes.
• Images: Use

  react-native-fast-image

  for caching and priority. Avoid large PNGs; use WebP.

Reduce Bundle and Startup Time

• Hermes: Enable for faster startup (default in RN 0.70+).
• Tree Shaking: Remove unused imports.
• ProGuard/R8: Enable code shrinking on Android.
• Lazy Screens: Use

  lazy

  prop for stack screens (enabled by default).

Anti-Patterns

• No ScrollView for Large Lists: Use FlatList.
• No Inline Styles: Use

  StyleSheet.create

  (optimized).
• No console.log in Production: Strip with babel plugin.

References

See references/optimization-guide.md for FlatList configuration, memoization rules, and bundle analysis.