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.