react-native-performance

Optimize React Native app performance with FlatList, memoization, and bundle reduction.

Updated Mar 5, 2026

Search Tags:#performance #profiling #react-native #memoization #bundle-size #image-optimization #flatlist

Ready to run

npx skills add https://github.com/truongnat/emplus --skill react-native-performance-truongnat

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-native-performance
Source: https://github.com/truongnat/emplus/tree/main/.agents/skills/jutsu-react-native%3Areact-native-performance
Command: npx skills add https://github.com/truongnat/emplus --skill react-native-performance-truongnat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It reduces UI lag, slow scrolling, and long load times in React Native apps by targeting common performance bottlenecks.

Core Features & Use Cases

FlatList & virtualized list tuning: Improves rendering for large datasets using virtualization settings and stable item layouts.
Render cost reduction: Cuts unnecessary re-renders with memoization patterns like React.memo, useCallback, and useMemo.
Asset and bundle optimization: Speeds up image loading and decreases JavaScript bundle size to improve time-to-interactive.
Real-world use case: When a feed or timeline has hundreds of items and stutters during scroll, apply this skill to stabilize list rendering, optimize card components, and reduce heavy asset overhead.

Quick Start

Ask the skill to review my React Native screen for scroll and render performance issues and propose concrete code changes for FlatList, memoization, and image/bundle optimizations.

Frequently Asked Questions about react-native-performance

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

FAQPage Schema

How do I fix slow scrolling and stuttering in a React Native FlatList?▼

Optimize React Native FlatList performance by tuning virtualization settings and ensuring stable item layouts. This stabilizes list rendering for large datasets and reduces scroll stutter by preventing unnecessary component rendering overhead.

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

Stop excessive re-renders by applying memoization patterns like React.memo, useCallback, and useMemo. These techniques cut unnecessary render costs by preventing component trees from re-rendering when props remain unchanged.

What is the best way to reduce React Native bundle size and image loading times?▼

Reduce React Native bundle size and image loading times through asset and bundle optimization. Speeding up image loading and decreasing the JavaScript bundle directly improves the application's time-to-interactive.

How does React Native profiling help find UI lag and performance bottlenecks?▼

React Native profiling identifies UI lag by analyzing component render cycles and heavy asset overhead. Profiling exposes slow list rendering and excessive re-renders so you can target specific bottlenecks with concrete code changes.

Can I use memoization to optimize a React Native feed with hundreds of items?▼

You can use memoization to optimize React Native feeds with hundreds of items. Applying React.memo, useCallback, and useMemo to card components reduces heavy asset overhead and stabilizes rendering during scroll interactions.