react-native-performance

Optimize React Native FlatLists with stable keys, getItemLayout, and memoized renderItem.

1|Updated Jan 17, 2026
One-click install
npx skills add https://github.com/kurokeita/ai-agent --skill react-native-performance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-performance
Source: https://github.com/kurokeita/ai-agent/tree/main/skills/react-native-performance
Command: npx skills add https://github.com/kurokeita/ai-agent --skill react-native-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers improve the performance of React Native apps by reducing unnecessary re-renders, optimizing list rendering, and memoizing components to deliver smoother UIs.

Core Features & Use Cases

  • FlatList optimization: stable keyExtractor, getItemLayout, and memoized renderItem to minimize re-renders on large lists.
  • Memoization patterns: useMemo and useCallback usage to prevent unnecessary recalculations and re-renders.
  • Zustand selector optimization: selective store subscriptions to isolate renders to relevant state changes.
  • Performance profiling: guidelines for profiling with React DevTools and why-did-you-render to identify bottlenecks.

Quick Start

Use this skill to scan an existing React Native screen and apply the listed patterns to turn a janky FlatList into a smooth, high-FPS list.

Frequently Asked Questions about react-native-performance

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

FAQPage Schema
How do I optimize a janky FlatList in React Native to stop unnecessary re-renders?▼

To optimize FlatList performance in React Native, apply deterministic patterns like stable keyExtractor, memoized renderItem, and getItemLayout for fixed heights to minimize re-renders on large lists and deliver smoother UIs.

How does Zustand selector optimization isolate renders in React Native?▼

Zustand selector optimization isolates renders by using selective store subscriptions, ensuring components only re-render when relevant state changes occur, minimizing unnecessary UI updates in React Native applications.

When should I use memoization patterns like useMemo and useCallback in React Native?▼

You should use memoization patterns like useMemo and useCallback in React Native to prevent unnecessary recalculations and re-renders, especially in interaction-heavy flows and screens with dynamic item rendering.

Can I use this performance optimization skill with my existing Expo app?▼

Yes, you can use this skill with Expo apps to scan existing React Native screens and apply optimization patterns to complex FlatLists, dynamic item rendering, and memoization for high-FPS performance.

What is the best way to profile React Native performance bottlenecks?▼

The best way to profile React Native performance bottlenecks is using React DevTools and why-did-you-render to identify unnecessary re-renders and pinpoint optimization targets within your application.

Why does my React Native list still drop frames after applying memoization?▼

If your React Native list still drops frames after memoization, you may be missing deterministic patterns like stable keyExtractor or getItemLayout, which are required to minimize re-renders on large lists.