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.