react-native-performance-reviewer
Skill18 starsChanged 6 months agoMITView on GitHub
Review React Native and Expo Go code changes for mobile performance, memory usage, CPU pressure, battery impact, network efficiency, and behavior under stressful real-world conditions. Use when reviewing apps/mobile, libs/* shared with Expo, or any React Native component, hook, navigation flow, screen, Expo module, API call, image handler, FlatList, animation, background task, push notification, permission flow, state manager, or native bridge usage. Activate even when the user only says "review this component", "check this hook", or "what's wrong" — whenever React Native or Expo code is in scope. Detects: unnecessary re-renders, unstable callbacks, excessive state updates, FlatList/ScrollView misuse, missing memoization, effect/subscription/timer leaks, oversized images, JS thread blocking, sync computation in render, animation jank, repeated API calls, poor caching, over-fetching, large payloads, slow startup paths, bundle growth, excessive logging, and weak offline/retry behavior.
- Reads credentials
In this repository55 other files it gives its agents.
- AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- ai-cost-manager-reducerSkill
- api-contract-reviewerSkill
- apps-language-rulesSkill
- cli-developerSkill
- contract-dto-consistency-reviewerSkill
- database-schema-reviewerSkill
- deep-code-reviewerSkill
- docs-managerSkill
- docs-publication-managerSkill
- feature-slice-designerSkill
- github-issue-solverSkill
- grasp-ooad-reviewSkill
- language-integratorSkill
- link-workspace-packagesSkill
- mcp-managerSkill
- migration-risk-reviewerSkill
- mobile-app-designerSkill
- mobile-app-integratorSkill
- mobile-app-product-ownerSkill
- mobile-app-reviewerSkill
- mobile-language-checkerSkill
- mobile-rulesetSkill
- mobil-ui-ux-rulesetSkill
- monitor-ciSkill
- nx-generateSkill
- nx-importSkill
- nx-pluginsSkill
- nx-run-tasksSkill
- nx-workspaceSkill
- product-owner-deciderSkill
- react-vite-performance-reviewerSkill
- release-readiness-reviewerSkill
- repo-architecture-auditorSkill
- repo-performance-guardSkill
- repository-pattern-reviewerSkill
- security-reviewerSkill
- smart-commitSkill
- supabase-api-rpc-reviewerSkill
- supabase-index-trigger-reviewerSkill
- supabase-rls-security-reviewerSkill
- supabase-schema-reviewerSkill
- tailwind-ui-ux-reviewerSkill
- ui-contract-guardSkill
- test-managerSkill
- unit-test-plannerSkill
- vite-performance-engineerSkill
- link-workspace-packagesSkill
- monitor-ciSkill
- nx-generateSkill
- nx-importSkill
- nx-pluginsSkill
- nx-run-tasksSkill
- nx-workspaceSkill
The file
We split this skill into the rules it gives an agent
3 rules. About 0 are common, 2 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈2
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 42
Use assets/review-report-template.md for the full structured report.
- Distinctive: line 134
Read-only unless the user explicitly asks for fixes.
- Distinctive: line 136
Do not flag style-only issues or micro-optimizations with no measurable impact.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
React Native / Expo Go Performance Reviewer
When to activate
Any code touch on:
apps/mobile/**— components, screens, hooks, navigationlibs/*libraries bundled by Metro (Expo/Hermes)- Expo modules, SDK APIs, or native bridge call sites
- AsyncStorage, SecureStore, MMKV, or SQLite usage
- Push notification handlers or background fetch tasks
- State management (Zustand, Redux, Jotai, Context)
- Network layers, query clients (React Query, SWR, Apollo)
- FlatList, SectionList, FlashList, ScrollView, VirtualizedList
- Image components, video players, camera flows
- Reanimated, Animated API, or gesture handlers
Review workflow
- Load
references/PERFORMANCE_CHECKLIST.mdand apply all sections relevant to the changed files. - Inspect the diff for the detection rules below.
- Produce a severity-ordered finding list using the output format below.
- Use
assets/review-report-template.mdfor the full structured report.
Severity classification
| Severity | Meaning |
critical | Causes crashes, ANRs, OOM kills, or severe jank on mid-range devices under normal load |
high | Visible jank, memory growth, or excessive battery drain on mid-range devices at moderate usage |
medium | Degrades experience on low-end devices or under stress (50+ concurrent users) |
low | Minor inefficiency, acceptable now but risky at scale |
info | Observation with no current risk |
Core detection rules
Rendering
- Flag components lacking
React.memo,useCallback, oruseMemowhere props are objects, arrays, or functions created inline. - Flag
useEffectwith no dependency array or an array including unstable references (new object/array each render). - Flag Context providers whose
valueis a new object literal on every render — re-renders all consumers. - Flag navigation screens that re-render on every tab switch due to missing
React.memooruseFocusEffectmisuse.
Memory & lifecycle
- Flag subscriptions, event listeners, timers, and Animated listeners not cleaned up in
useEffectreturn. - Flag state that accumulates over a session without a bound (unbounded log arrays, growing caches, stacked screens never popped).
- Flag
useRefstoring a value that updates every render (effectively a re-render vector).
List performance
- Flag
FlatList/SectionListmissingkeyExtractor,getItemLayout,removeClippedSubviews,maxToRenderPerBatch,windowSize, orinitialNumToRender. - Flag inline
renderItemfunctions (created each render) — extract or memoize. - Flag lists rendering >50 items without virtualization.
- Flag
ScrollViewwrapping large or unknown-size datasets. - Flag
FlashListmissingestimatedItemSize(causes layout jumps).
JavaScript thread
- Flag synchronous heavy computation (sorting large arrays, parsing large JSON, regex on large strings) in the render path or without
InteractionManager.runAfterInteractions. - Flag
require()calls inside render functions. - Flag native bridge calls in tight loops without batching.
Network & caching
- Flag
fetch/axioscalls insideuseEffectwithout deduplication, abort controllers, or query-client caching. - Flag the same endpoint called multiple times per screen mount without sharing the result.
- Flag missing
staleTime/gcTime(React Query) or equivalent cache policies. - Flag large payloads (>200KB JSON) without pagination or field projection.
- Flag absence of cached fallback when the network is unavailable.
- Flag missing retry with exponential backoff on transient errors.
Images & assets
- Flag
<Image>without explicitwidth/height(causes layout recalculation). - Flag remote images not using a caching layer (expo-image, react-native-fast-image, or equivalent).
- Flag source images >2× the display resolution without resize mode or CDN resizing.
- Flag SVGs rendered inline without memoization in list items.
Animations
- Flag
Animated.Valueanimations not usinguseNativeDriver: truewhere possible. - Flag layout animations triggering on every render rather than on user action.
- Flag Reanimated worklets accessing JS-side state (breaks UI thread isolation).
Startup & bundle
- Flag large imports at module top level only used in one screen (lazy-import instead).
- Flag
console.log/console.warncalls not guarded with__DEV__or a production-safe logger. - Flag unused Expo SDK modules in
app.jsonplugins (inflates app binary).
Background tasks & notifications
- Flag background fetch tasks doing uncapped network requests without timeouts.
- Flag push notification handlers updating global state on every notification without debouncing.
Permissions
- Flag permissions requested at app startup rather than at the point of need (increases rejection rate and cold-start friction).
Gotchas
- Hermes does not support
import.meta.*— shared libs usingimport.meta.envmust have a.native.tsxstub. useCallbackwith an empty dependency array still re-creates if the component unmounts/remounts — confirm protection viaReact.memoon the parent.- Expo Go development builds skip Hermes bytecode and tree shaking — always validate perf claims on a release build.
AsyncStorageis synchronous at the JS layer but asynchronous underneath — blocking render onawait AsyncStorage.getcauses observable latency.- Navigation stacks that keep mounted screens for back-navigation can hide significant memory accumulation — check
detachInactiveScreenson the Navigator.
Output format
For each finding:
Finding: <short title>
Severity: critical | high | medium | low | info
Location: <file path>:<line range or function name>
Risk: <what breaks, when, and on what device class>
Failure mode: <observable symptom — jank, OOM kill, timeout, crash, ANR>
Fix: <concrete change with code snippet if useful>
Verification: <how to confirm the fix works>Constraints
- Read-only unless the user explicitly asks for fixes.
- Order findings by severity descending.
- Do not flag style-only issues or micro-optimizations with no measurable impact.
- Validate findings against the current file state — do not hallucinate line numbers.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

