skills.rest
CJHarmath
CJHarmathCOMMUNITY
Explore all skills by this author →
GitHub

rn-performance

Optimizes React Native apps with memoization, FlatList optimizations, and Zustand selectors.

Updated Dec 22, 2025
Search Tags:#performance#zustand#react-native#memoization#flatlist#usememo#usecallback
One-click install
npx skills add https://github.com/CJHarmath/claude-agents-skills --skill rn-performance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rn-performance
Source: https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/rn-performance
Command: npx skills add https://github.com/CJHarmath/claude-agents-skills --skill rn-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React Native performance issues often stem from unnecessary re-renders, unoptimized lists, and expensive computations on the JS thread. This Skill codifies patterns to optimize common bottlenecks in Expo/React Native apps.

Core Features & Use Cases

  • FlatList optimization: stable keyExtractor, getItemLayout, and memoized renderItem.
  • Memoization & stable references: useMemo, useCallback, and React.memo patterns to reduce re-renders.
  • State access optimization: selective Zustand selectors to prevent global store re-renders.
  • Image optimization: using expo-image caching to reduce image load jank.
  • Use case: a long feed or chat where smooth scrolling is critical.

Quick Start

Identify list-heavy screens, refactor inline props to memoized values, and apply the listed patterns to reduce re-renders and jank. Then measure improvements with the profiler.

Frequently Asked Questions about rn-performance

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

FAQPage Schema
How do I optimize React Native FlatList rendering for long feeds?▼

Optimize React Native FlatList rendering by applying stable keyExtractor, getItemLayout, and memoized renderItem components to reduce list re-renders and scrolling jank.

Why does my React Native app re-render so much and how can memoization help?▼

React Native apps re-render excessively when inline props and unstable references change on every render; applying useMemo, useCallback, and React.memo prevents unnecessary component updates.

How do I prevent global state re-renders with Zustand selectors in React Native?▼

Prevent Zustand global state re-renders by using selective state subscriptions that extract only the specific values needed, bypassing unrelated store updates.

What's the best way to reduce image load jank in Expo React Native apps?▼

Reduce image load jank in Expo React Native apps by implementing expo-image caching, which maintains visual stability during fast scrolling in long feeds.

Can I use these React Native performance patterns without changing my project structure?▼

You can apply these performance patterns to standard Expo and React Native projects with standard tooling, requiring no structural changes to implement memoization and list optimizations.

When should I not use React.memo or useCallback for React Native performance?▼

Avoid React.memo and useCallback when component rendering is inexpensive or props change on every render anyway, as memoization adds overhead without preventing re-renders.

Related Skills

Explore More Software Engineering Skills→
daloyjsdaloyjs
18

vercel-react-native-skills

Apply standardized performance best practices to React Native and Expo apps.

Official
Intermediate
rsmdtrsmdt
381

performance-profiling

Diagnose performance issues by profiling CPU, memory, and I/O metrics.

Community
Advanced
miklosmemiklosme

vercel-react-native-skills

Implement React Native and Expo performance best practices for lists, images, and animations.

Community
Advanced
soham2008xyzsoham2008xyz

vercel-react-native-skills

Enforces React Native rendering, list virtualization, animation patterns to prevent crashes and improve performance.

Community
Intermediate