Argent React Native Optimization
Map React Native profiler and semantic sweep findings to concrete memo, hook, list, and animation fixes on a shipping mobile app.
Overview
argent-react-native-optimization is an agent skill most often used in Ship (also Build frontend) that matches React Native profiler findings to memo, hook, stylesheet, and list optimizations.
Install
npx skills add https://github.com/software-mansion/argent --skill argent-react-native-optimizationWhat is this skill?
- Fix matrix links profiler findings to React.memo, useMemo, useCallback, and StyleSheet.create patterns
- Explicit rule: skip manual memo when React Compiler is active per react-profiler-analyze status
- List tuning: removeClippedSubviews, batch/window props, getItemLayout, or FlashList with estimatedItemSize
- Warns useCallback alone is ineffective without memoized children
- JS-thread animation jank remedies referenced in the fix reference continuation
- Fix reference table spans re-renders, hooks, inline JSX, lists, and JS-thread animation rows
Adoption & trust: 1.9k installs on skills.sh; 1.2k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have profiler or semantic sweep output for a React Native screen but no consistent checklist tying each finding to the right fix.
Who is it for?
Indie RN developers shipping Expo or bare apps who already run a profiler and want a structured optimization pass.
Skip if: Greenfield apps with no performance baseline, or teams standardizing on React Compiler without reading per-component compiler status first.
When should I use this skill?
Profiler or semantic sweep results name React Native re-renders, expensive recomputation, inline objects in JSX, or list jank.
What do I get? / Deliverables
You apply targeted React.memo, hook, StyleSheet, FlatList, or FlashList changes aligned to each reported performance symptom.
- Optimized component memo boundaries
- Tuned list configuration or FlashList migration
- Stable callbacks paired with memoized children
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Performance remediation is canonical in Ship because the skill assumes you are tuning a built RN app before or after release, not ideating features. Perf subphase matches the fix-reference table tied to jank, re-renders, and list scrolling under load.
Where it fits
Refactor inline style objects to StyleSheet.create after semantic sweep flags new references every render.
Migrate a janky settings list to @shopify/flash-list with estimatedItemSize after profiler shows frame drops.
During pre-release review, gate PRs that add useCallback without memoized list item components.
How it compares
Use as a fix playbook after profiling, not instead of react-profiler-analyze or device-side measurement.
Common Questions / FAQ
Who is argent-react-native-optimization for?
Solo and small-team React Native builders who profile scrolling and render cost and need the agent to suggest the correct memo, list, and style patterns from a fixed reference table.
When should I use argent-react-native-optimization?
Use it in Ship perf when traces show list jank or redundant renders; use it in Build frontend while hardening screens before release; pair with profiler output rather than guessing optimizations.
Is argent-react-native-optimization safe to install?
It is documentation-style guidance; review the Security Audits panel on this page and validate each memo or list change with tests because over-memoization can mask stale data bugs.
SKILL.md
READMESKILL.md - Argent React Native Optimization
# Fix Reference Match profiler findings and semantic sweep results to concrete fixes. | Finding | Fix | Detail | | -------------------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | Re-renders with same props | `React.memo(Comp)` | **Skip if React Compiler active** — `react-profiler-analyze` reports compiler status per component | | Expensive recomputation / unstable callbacks | `useMemo(fn, [deps])` / `useCallback(fn, [deps])` | `useCallback` must pair with `React.memo` on child — alone it has no effect | | Inline objects/arrays in JSX | `StyleSheet.create()` / module-level const | New reference every render breaks shallow equality | | List jank | `removeClippedSubviews`, `maxToRenderPerBatch`, `windowSize`, `getItemLayout` | Or migrate to `@shopify/flash-list` with `estimatedItemSize` | | JS-thread animation jank | `useNativeDriver: true` or `react-native-reanimated` | `useNativeDriver` only works for `transform` and `opacity` properties | | Heavy work during transitions | `InteractionManager.runAfterInteractions()` | Defers execution until active animations complete | | Slow startup | Hermes + inline requires in `metro.config.js` | Lazy `require()` defers loading heavy modules until first use | | Redundant, heavy, or n+1 network calls | `view-network-logs` → `view-network-request-details` | Batch, debounce, or cache at the data layer | # Phase 1: Lint Rules Run once at the project root. Catches mechanical issues deterministically. Install missing plugins before running: `npm install --save-dev eslint-plugin-react-perf`. ## Rules ### Performance (eslint-plugin-react-perf) | Rule | Catches | | ---------------------------------------- | -------------------------------------------------------- | | `react-perf/jsx-no-new-object-as-prop` | Object literals `{}` as JSX props - new ref every render | | `react-perf/jsx-no-new-array-as-prop` | Array literals `[]` as JSX props - new ref every render | | `react-perf/jsx-no-new-function-as-prop` | Arrow functions / function expressions as JSX props | | `react-perf/jsx-no-jsx-as-prop` | JSX elements as prop values (e.g. `icon={<Icon />}`) | ### React (eslint-plugin-react) | Rule | Catches | | ----------------------------------------- | ------------------------------------------------------------------- | | `react/no-array-index-key` | `key={index}` - incorrect reconciliation on reorder | | `react/jsx-no-bind` | `.bind()` in JSX props - new function ref every render | | `react/jsx-no-constructed-context-values` | Object/array literals as Context `value` - re-renders all consumers | | `react/no-unstable-nested-components` | Components defined inside render - full remount each render | | `react/no-