argent-react-native-optimization

Diagnoses and fixes React Native performance issues through lint sweeps, semantic review, and profiling.

Updated Aug 29, 2026
One-click install
npx skills add https://github.com/Seyamalam/pstu_final --skill argent-react-native-optimization-seyamalam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: argent-react-native-optimization
Source: https://github.com/Seyamalam/pstu_final/tree/main/.agents/skills/argent-react-native-optimization
Command: npx skills add https://github.com/Seyamalam/pstu_final --skill argent-react-native-optimization-seyamalam

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires eslint-plugin-react-perf, eslint-plugin-react, eslint-plugin-react-native, eslint-plugin-react-hooks, and includes references (resource) components.

What problem does it solve? React Native apps often suffer from jank, excessive re-renders, and slow startup, but developers frequently apply blind optimizations without measuring. This Skill enforces a profile-first workflow that finds real bottlenecks before fixing them. ## Core Features & Use Cases - Lint Sweep: Runs ESLint with react-perf, react, react-native, and react-hooks rulesets to catch mechanical issues like inline styles, unstable props, and array index keys. - Semantic Sweep: Reviews memoization, list virtualization, animations, async patterns, effect cleanup, state hygiene, and context architecture with judgment-based analysis. - Visual Profiling: Delegates to a profiler skill to measure render counts, trace fiber trees, and verify fixes with before/after metrics. - Use Case: When a user reports their Expo app feels slow on the home screen, this Skill runs the lint sweep, profiles the screen, identifies a component re-rendering with unchanged props, applies React.memo, and re-measures to confirm improvement. ## Quick Start Optimize my React Native app by profiling first to find the real bottlenecks, then fix the top offenders and re-measure.

Frequently Asked Questions about argent-react-native-optimization

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

FAQPage Schema
How do I optimize a slow React Native app?▼

Profile first to find real bottlenecks instead of applying blind fixes. Run a lint sweep with react-perf rules to catch mechanical issues, then use the React Profiler to measure render counts, fix the top offender, and re-measure to confirm improvement.

How to find components that re-render too often in React Native?▼

Use the React Profiler to get a live render count table that identifies hot components instantly. Then inspect each finding with component source and fiber tree tracing to understand why the re-renders occur before applying React.memo or useCallback.

Should I use React.memo when React Compiler is enabled?▼

No, do not add useCallback, useMemo, or React.memo when React Compiler is active unless you confirm a compiler bail-out via the fiber tree showing absent useMemoCache. The profiler analysis reports whether the compiler is enabled per component.

What ESLint rules catch React Native performance issues?▼

The eslint-plugin-react-perf rules catch new objects, arrays, and functions passed as JSX props. Additional rules from eslint-plugin-react and eslint-plugin-react-native catch array index keys, inline styles, unstable context values, and nested component definitions.

Why does my FlatList still jank after optimization?▼

List jank often persists when virtualization props are misconfigured or items re-render unnecessarily. Check removeClippedSubviews, maxToRenderPerBatch, windowSize, and getItemLayout settings, or migrate to @shopify/flash-list with estimatedItemSize for better recycling.