React Native performance optimization guide. Use when working on performance issues, optimizing renders, improving startup time, debugging memory leaks, optimizing lists/animations, or analyzing bundle size. Covers profiling, memoization, React Compiler, Concurrent React, state patterns, FlatList optimization, Reanimated, native threading, and bundle optimization.
The react-performance skill is a focused guide for diagnosing and improving React Native application performance. It is designed to help with common performance problems such as excessive re-renders, slow scrolling, long startup time, memory growth, animation frame drops, and oversized bundles. The skill emphasizes a measurement-first workflow, guiding users to identify the real bottleneck before applying optimizations. It also includes a strict loading strategy so only the most relevant reference is consulted, reducing unnecessary context and keeping investigation targeted.
Its main capabilities cover performance profiling, render optimization, memoization techniques, React Compiler guidance, Concurrent React patterns, state management approaches, list virtualization, animation tuning, startup improvements, bundle optimization, and native-layer performance concepts. The skill provides a Quick Diagnosis table that maps visible symptoms to a single recommended reference file, along with guidance for cases where the root cause is still unknown. It also addresses lower-level topics such as threading, Fabric, JSI architecture, and native optimization concerns, making it useful across both JavaScript and native performance boundaries.
This skill is intended for developers working on React Native apps who need a structured way to troubleshoot and optimize runtime behavior. It is especially useful for engineers investigating a specific slowdown, improving a problematic screen, or reducing startup and bundle costs. It also fits teams that want a disciplined debugging process, since it instructs users to ask clarifying questions when the issue is unclear and to avoid loading multiple references at once. The target users are primarily React Native developers and performance-focused engineers who need practical, symptom-driven guidance.
Start by reading only the main SKILL.md content, then use the Quick Diagnosis table to choose the single reference file that matches the symptom you are seeing. Do not load multiple references at once.
First clarify what feels slow, when it happens, and which screen or component is involved. If the cause is still unknown, use the profiling reference to guide investigation before choosing another reference.
It covers re-render problems, slow lists and scrolling, startup delays, memory growth, dropped animation frames, bundle size concerns, and related React Native runtime and native-layer performance topics.
No. In addition to React and state optimization topics, it also includes references for threading, Fabric, JSI architecture, and native optimization, so it spans both JavaScript and native performance concerns.
Yes. The skill requires a surgical workflow: load only one reference file at a time, and ask clarifying questions before loading any reference if the problem is unclear. It also expects users to measure before optimizing rather than applying changes blindly.
Quick Setup:
.claude/skills/Repository
benaor/claude-config