>_SkillsHub▋

> react-native-performance

Optimization strategies for smooth 60fps mobile apps. Use when optimizing React Native app performance, reducing re-renders, or fixing frame drops. (triggers: **/*.tsx, **/*.ts, FlatList, memo, useMemo, useCallback, performance, optimization)

fetch
$curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/react-native-performance?format=md"
SKILL.md•react-native-performance

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 for FlatList configuration, memoization rules, and bundle analysis.

Related Topics

react/performance | common/performance-engineering

> related_skills --same-repo

> typescript-tooling

Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)

> typescript-security

Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)

> typescript-language

Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)

> typescript-best-practices

Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)

┌ stats

installs/wk0
░░░░░░░░░░
github stars341
██████████
first seenMar 17, 2026
└────────────

┌ repo

HoangNguyen0403/agent-skills-standard
by HoangNguyen0403
└────────────

┌ tags

#mobile#performance#react
└────────────