performance-optimization

Enforce React Native performance rules for lists, memoization, and animations.

Updated Feb 27, 2026

Search Tags:#performance #animations #react-native #memoization #re-renders #lists

Ready to run

npx skills add https://github.com/alejandro-technology/react-native-template --skill performance-optimization-alejandro-technology

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/alejandro-technology/react-native-template/tree/main/.claude/skills/enforcement/performance-optimization
Command: npx skills add https://github.com/alejandro-technology/react-native-template --skill performance-optimization-alejandro-technology

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance pitfalls in React Native apps undermine smooth UX by causing excessive re-renders and jank in lists and animations.

Core Features & Use Cases

Enforces FlashList over FlatList patterns and stable keyExtractor usage.
Encourages React.memo on list items and useMemo/useCallback for expensive computations.
Provides layout-level animation guidance to avoid per-item animations.

Quick Start

Refactor list-heavy components to memoize items, centralize layout animations, and apply debounced inputs to minimize rerenders.

Frequently Asked Questions about performance-optimization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I stop excessive re-renders in React Native lists?▼

Stop excessive re-renders by applying React.memo to list items and using useMemo for expensive computations. This ensures components only re-render when their specific props change, reducing jank in list-heavy views.

What is the best way to optimize animations in React Native to avoid jank?▼

The best way to optimize animations is to centralize them at the layout level rather than applying per-item animations. This approach avoids performance pitfalls and maintains smooth UX in animation-heavy flows.

Does FlashList perform better than FlatList for React Native list rendering?▼

FlashList performs better by enforcing optimized list rendering patterns over FlatList. You must also use a stable keyExtractor to ensure items track correctly across renders and avoid unnecessary component mounting.

When do I need memoization for React Native components?▼

You need memoization when list-heavy components perform expensive computations or render frequently. Apply useMemo and useCallback to cache values and functions, preventing unnecessary recalculations during re-renders.

How to guard data-fetching to prevent performance issues in React Native?▼

Guard data-fetching by applying debounced inputs to minimize rerenders and control network requests. This prevents rapid successive fetches that degrade performance during user interaction in list views.

Can I use this performance optimization approach during code reviews?▼

You can apply these deterministic rules and checks during code reviews to verify list rendering patterns, memoization strategies, animation placement, and data-fetch guards are satisfied before merging.