# React Native Performance

> Optimization strategies for smooth 60fps mobile apps. Use when this capability is needed.

- Skill: `tomevault-io/react-native-performance-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/react-native-performance-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/react-native-performance-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/react-native-performance-2

---


# React Native Performance

## **Priority: P0 (CRITICAL)**

## FlatList Optimization

- **windowSize**: Reduce to 5-10 for long lists (default 21).
- **getItemLayout**: Provide for fixed-height items. Skips measurement.
- **removeClippedSubviews**: Enable for Android (default true).
- **maxToRenderPerBatch**: Limit to 5-10 items per frame.
- **keyExtractor**: Use stable unique IDs, never index.
- **Avoid Anonymous Functions**: Define `renderItem` outside component or use `useCallback`.

## React Optimization

- **React.memo**: Wrap presentational components to prevent re-renders.
- **useMemo**: Cache expensive calculations.
- **useCallback**: Stabilize function refs for child props.
- **Avoid Inline Objects**: Extract to constants or `useMemo`.

## Navigation

- **Lazy Screens**: Use `lazy` prop for stack screens (enabled by default).
- **Avoid Listeners**: Remove navigation event listeners in cleanup.

## Images

- **Image Caching**: Use `react-native-fast-image` for network images.
- **Resize**: Provide `resizeMode` and fixed dimensions.
- **Format**: Use WebP for smaller size.

## Bundle Size

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

## 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.

## Reference & Examples

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

## Related Topics

react/performance | common/performance-engineering

---
> Source: [fierzone/agent-skills-standard](https://github.com/fierzone/agent-skills-standard) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-16 -->