\r \r

OpenHarmony React Native Performance Static Check Skills\r

\r Static-check rules and config for React Native for OpenHarmony, from the official performance-optimization doc. This skill is English-only to reduce token usage; Chinese content is available via links below.\r \r

When to Apply\r

\r Use this skill when:\r \r

• Writing or reviewing React Native for OpenHarmony (RNOH) application code or OpenHarmony project configuration\r
• Optimizing React Native page rendering, setState, or list performance\r
• Configuring bundle-harmony build, Hermes bytecode, or Release build\r
• Integrating or reviewing RNAbility lifecycle (onForeground/onBackground)\r
• Designing or implementing TurboModule (main vs worker thread)\r
• Preparing for performance analysis with Trace, React Marker, FCP, etc.\r \r

Rule Categories by Priority\r

\r | Priority | Category | Impact | Prefix |\r | -------- | ------------------- | -------- | ------------------------- |\r | 1 | Render optimization | CRITICAL | rnoh-render- |\r | 2 | Bundle & native | HIGH | rnoh-bundle-, rnoh-native- |\r | 3 | Lifecycle & monitor | HIGH | rnoh-lifecycle- |\r | 4 | TurboModule | MEDIUM | rnoh-turbo- |\r | 5 | List & key | MEDIUM | rnoh-list- |\r \r

Quick Reference\r

\r

1. Render optimization (CRITICAL)\r

\r

• rnoh-render-avoid-same-state — Avoid setState when state unchanged to prevent extra renders\r
• rnoh-render-pure-memo — Use PureComponent or React.memo to avoid unnecessary re-renders\r
• rnoh-render-props-once — Create callbacks/prop objects once (constructor or outside component)\r
• rnoh-render-split-child — Split independent UI into child components\r
• rnoh-render-merge-setstate — Merge setState to avoid multiple commits and renders\r
• rnoh-render-state-not-mutate — Use new objects in setState; do not mutate existing state\r
• rnoh-render-batching — Keep React 18 Automatic Batching enabled (RNOH default concurrentRoot: true)\r \r

2. Bundle & native config (HIGH)\r

\r

• rnoh-bundle-release — Use --dev=false --minify=true for performance/production bundle\r
• rnoh-bundle-hbc — Prefer Hermes bytecode (hermesc) for production\r
• rnoh-native-release — Use Release build on native side; lower LOG_VERBOSITY_LEVEL when appropriate\r
• rnoh-native-bisheng — Optionally use BiSheng compiler (buildOption.nativeCompiler: "BiSheng")\r \r

3. Lifecycle & monitoring (HIGH)\r

\r

• rnoh-lifecycle-foreground-background — Call onForeground/onBackground in onPageShow/onPageHide or onShown/onHidden\r
• rnoh-lifecycle-fcp — First-frame monitoring: use mount event or root onLayout to report FCP\r \r

4. TurboModule (MEDIUM)\r

\r

• rnoh-turbo-worker — Run heavy TurboModules (JSON, crypto, image, network, I/O) on worker thread; avoid ImageLoader on worker\r \r

5. List & key (MEDIUM)\r

\r

• rnoh-list-key — Provide stable keys for list items; avoid using index as key\r \r

How to Use\r

\r

• Static checks: Apply the rules above in code review or scripts (JS/TS and config).\r
• Details and examples: See the corresponding rule files under rules/ (e.g. rules/rnoh-render-pure-memo.md).\r
• Full doc: Performance optimization (en).\r \r

Relation to general React Native skills\r

\r

• This skill focuses on OpenHarmony-specific React Native performance (RNAbility, bundle-harmony, HBC, TurboModule worker, Trace/React Marker).\r
• It complements vercel-react-native-skills and react-native-best-practices: list virtualization (FlashList), Pressable, expo-image, StyleSheet, etc. still apply; this skill adds OpenHarmony-side config and render-optimization details.\r