ohos-react-native-performance

OpenHarmony React Native 性能静态检查和优化。基于 ohos_react_native 性能文档。在编写或审查 React Native for OpenHarmony 代码、bundle-harmony、生命周期或 TurboModule 时使用。适用于 RNAbility、Hermes 字节码、React 渲染优化。

## 概述（中文）

OpenHarmony React Native 性能静态检查和优化。基于 ohos_react_native 性能文档。在编写或审查 React Native for OpenHarmony 代码、bundle-harmony、生命周期或 TurboModule 时使用。适用于 RNAbility、Hermes 字节码、React 渲染优化。

## 原文

# OpenHarmony React Native Performance Static Check Skills

Static-check rules and config for React Native for OpenHarmony, from the official [performance-optimization](https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/en/performance-optimization.md) 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)](https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/en/performance-optimization.md).

## 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.