performance

Optimize React Native app performance with FlatList conversion, memoization, and image optimization.

Updated Jan 29, 2026

Search Tags:#performance #gpu #react-native #memoization #image-optimization #flatlist

Ready to run

npx skills add https://github.com/takapom/trip-app --skill performance-takapom

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/takapom/trip-app/tree/main/.claude/skills/performance
Command: npx skills add https://github.com/takapom/trip-app --skill performance-takapom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve React Native app performance by applying FlatList conversion, memoization, and image optimization.

Core Features & Use Cases

FlatList optimization and component memoization to ensure smooth scrolling on long lists.
Image loading and caching strategies to reduce memory usage and startup time.
Liquid Glass design guidelines to balance visual effects with rendering performance.

Quick Start

Apply the FlatList optimization, memoize item components, and implement image loading optimizations across the app.

Frequently Asked Questions about performance

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

FAQPage Schema

How do I fix React Native FlatList slow scrolling and frame drops?▼

Fix React Native FlatList slow scrolling by converting legacy lists to FlatList, applying component memoization with React.memo, and implementing image caching to ensure smooth UI rendering. This reduces unnecessary re-renders during long list interactions.

Why does my React Native app use so much memory with image-heavy views?▼

High memory usage in React Native image-heavy views is often caused by inefficient image loading and missing caching strategies. Applying proper image optimization and caching mechanisms reduces memory overhead and improves startup time.

What's the best way to memoize list item components in React Native?▼

The best way to memoize list item components in React Native is wrapping them with React.memo to prevent unnecessary re-renders. This ensures FlatList items only re-render when their specific props change.

Can I apply Liquid Glass design effects without hurting React Native rendering performance?▼

Yes, you can apply Liquid Glass design effects while maintaining performance by following specific guidelines that balance visual effects with rendering efficiency. This ensures UI enhancements do not degrade list scrolling.

When should I not use FlatList optimization for my React Native lists?▼

You should avoid FlatList optimization overhead when dealing with very short, static lists where rendering performance is already optimal. Over-optimizing simple lists with unnecessary memoization can introduce complexity without measurable benefits.