Skip to content

OpenHarmony React Native Performance

Verified

OpenHarmony React Native performance static checks and optimization. Based on ohos_react_native performance doc. Use when writing or reviewing React Native for OpenHarmony code, bundle-harmony, lifecycle, or TurboModule. Applies to RNAbility, Hermes bytecode, React render optimization.

324

Install

Claude Code

Add to .claude/skills/

About This Skill

  • # OpenHarmony React Native Performance Static Check Skills
  • 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.
  • ## When to Apply
  • Use this skill when:
  • Writing or reviewing React Native for OpenHarmony (RNOH) application code or OpenHarmony project configuration
  • Optimizing React Native page rendering, setState, or list performance
  • Configuring bundle-harmony build, Hermes bytecode, or Release build
  • Integrating or reviewing RNAbility lifecycle (onForeground/onBackground)
  • Designing or implementing TurboModule (main vs worker thread)
  • Preparing for performance analysis with Trace, React Marker, FCP, etc.
  • ## Rule Categories by Priority
  • | Priority | Category | Impact | Prefix |
  • | -------- | ------------------- | -------- | ------------------------- |
  • | 1 | Render optimization | CRITICAL | `rnoh-render-` |
  • | 2 | Bundle & native | HIGH | `rnoh-bundle-`, `rnoh-native-` |
  • | 3 | Lifecycle & monitor | HIGH | `rnoh-lifecycle-` |
  • | 4 | TurboModule | MEDIUM | `rnoh-turbo-` |
  • | 5 | List & key | MEDIUM | `rnoh-list-` |
  • ## Quick Reference
  • ### 1. Render optimization (CRITICAL)
  • `rnoh-render-avoid-same-state` — Avoid setState when state unchanged to prevent extra renders
  • `rnoh-render-pure-memo` — Use PureComponent or React.memo to avoid unnecessary re-renders
  • `rnoh-render-props-once` — Create callbacks/prop objects once (constructor or outside component)
  • `rnoh-render-split-child` — Split independent UI into child components
  • `rnoh-render-merge-setstate` — Merge setState to avoid multiple commits and renders
  • `rnoh-render-state-not-mutate` — Use new objects in setState; do not mutate existing state
  • `rnoh-render-batching` — Keep React 18 Automatic Batching enabled (RNOH default concurrentRoot: true)
  • ### 2. Bundle & native config (HIGH)
  • `rnoh-bundle-release` — Use `--dev=false --minify=true` for performance/production bundle
  • `rnoh-bundle-hbc` — Prefer Hermes bytecode (hermesc) for production
  • `rnoh-native-release` — Use Release build on native side; lower LOG_VERBOSITY_LEVEL when appropriate
  • `rnoh-native-bisheng` — Optionally use BiSheng compiler (buildOption.nativeCompiler: "BiSheng")
  • ### 3. Lifecycle & monitoring (HIGH)
  • `rnoh-lifecycle-foreground-background` — Call onForeground/onBackground in onPageShow/onPageHide or onShown/onHidden
  • `rnoh-lifecycle-fcp` — First-frame monitoring: use mount event or root onLayout to report FCP
  • ### 4. TurboModule (MEDIUM)
  • `rnoh-turbo-worker` — Run heavy TurboModules (JSON, crypto, image, network, I/O) on worker thread; avoid ImageLoader on worker
  • ### 5. List & key (MEDIUM)
  • `rnoh-list-key` — Provide stable keys for list items; avoid using index as key
  • ## How to Use
  • Static checks: Apply the rules above in code review or scripts (JS/TS and config).
  • Details and examples: See the corresponding rule files under `rules/` (e.g. `rules/rnoh-render-pure-memo.md`).
  • Full doc: Performance optimization (en).
  • ## Relation to general React Native skills
  • This skill focuses on OpenHarmony-specific React Native performance (RNAbility, bundle-harmony, HBC, TurboModule worker, Trace/React Marker).
  • 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.

Use Cases

  • Apply OpenHarmony-specific React Native performance optimizations during code review
  • Configure production bundle builds with Hermes bytecode and minification for RNOH apps
  • Optimize React component rendering by identifying unnecessary re-renders and setState patterns
  • Set up TurboModule worker thread configuration for heavy operations like crypto and network I/O
  • Implement first-frame monitoring and lifecycle management for RNAbility applications

Pros & Cons

Pros

  • + Prioritized rule categories (Critical/High/Medium) help focus optimization efforts where they matter most
  • + Covers the full stack from React render optimization to native build configuration
  • + Based on official OpenHarmony React Native performance documentation

Cons

  • - Extremely niche — only applicable to React Native for OpenHarmony (RNOH) platform
  • - Static checks only — does not include runtime profiling or automated performance testing tools

Frequently Asked Questions

What does OpenHarmony React Native Performance do?

OpenHarmony React Native performance static checks and optimization. Based on ohos_react_native performance doc. Use when writing or reviewing React Native for OpenHarmony code, bundle-harmony, lifecycle, or TurboModule. Applies to RNAbility, Hermes bytecode, React render optimization.

What platforms support OpenHarmony React Native Performance?

OpenHarmony React Native Performance is available on Claude Code, OpenClaw.

What are the use cases for OpenHarmony React Native Performance?

Apply OpenHarmony-specific React Native performance optimizations during code review. Configure production bundle builds with Hermes bytecode and minification for RNOH apps. Optimize React component rendering by identifying unnecessary re-renders and setState patterns.

Stay Updated on Agent Skills

Get weekly curated skills + safety alerts