# Zereight React Native Optimizer

> React Native performance review checklist for code reviews. Use when reviewing RN code to detect rendering, animation, and native performance regressions. Complements zereight-review — run both together on RN PRs.

- Skill: `zereight/zereight-react-native-optimizer` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add zereight/zereight-react-native-optimizer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zereight/zereight-react-native-optimizer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: zereight (https://skillmd.com/u/zereight)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/zereight/zereight-react-native-optimizer

---


# zereight-react-native-optimizer

Focused on **performance correctness** during code review.
The goal is not to teach optimization — it is to catch regressions before they ship.

## When to use

Use alongside `zereight-review` when:
- Reviewing React Native or Expo PRs
- Auditing list, animation, or native module changes
- Checking screen transitions or gesture interactions

Not a replacement for `react-native-best-practices` or `vercel-react-native-skills` — those explain *how* to optimize. This skill detects *what went wrong* in a diff.

## Prerequisites

The following skills provide the full optimization context this skill references:
- `react-native-best-practices` (callstackincubator)
- `vercel-react-native-skills` (vercel-labs)
- `react-native-animations` (pluginagentmarketplace)
- `react-native-best-practices` (callstackincubator)
- `agent-device` (callstackincubator)

## Priority order

1. Animation on JS thread (causes visible jank — always 🟠 Major or higher)
2. List rendering with FlatList instead of FlashList for large datasets
3. Unnecessary re-renders in hot paths (list items, animated components)
4. Memory leaks (listeners, subscriptions not cleaned up)
5. Bridge overuse (synchronous calls, large payloads)
6. Bundle size regressions
7. Image loading / caching issues

## Rendering checks

Run on every component change. See `references/rendering.md` for detail.

| Pattern | Severity |
|---|---|
| FlatList used for list with 50+ items | 🛠️ 🟠 Major |
| `keyExtractor` returns index | ⚠️ 🟡 Minor |
| Inline function/object passed as prop to memoized child | 🛠️ 🟡 Minor |
| `React.memo` wrapping component that receives new object ref each render | ⚠️ 🟡 Minor |
| Context provider too high — causes full subtree re-render | ⚠️ 🟠 Major |
| `useSelector` selecting large slice of store | 🛠️ 🔵 Trivial |
| Missing `useCallback` on event handler passed to child | 🛠️ 🔵 Trivial |
| `StyleSheet` defined inside component body | 🛠️ 🟡 Minor |

## Animation checks

Run when animation, gesture, or transition code is changed. See `references/animation.md` for detail.

| Pattern | Severity |
|---|---|
| `Animated.Value` (legacy API) used instead of Reanimated shared value | 🛠️ 🟠 Major |
| Animation drives style via `setState` (runs on JS thread) | ⚠️ 🟠 Major |
| Worklet function accesses JS-side state directly (no `runOnJS`) | ⚠️ 🟠 Major |
| `useAnimatedStyle` depends on non-shared-value reactive data | ⚠️ 🟡 Minor |
| Touch handled with `TouchableOpacity` instead of `GestureDetector` in animated context | 🛠️ 🟡 Minor |
| `LayoutAnimation` used instead of Reanimated layout animations | 🛠️ 🔵 Trivial |
| Animation not cancelled on unmount | ⚠️ 🟡 Minor |

## Native / bridge checks

Run when native modules, images, or bundle changes are involved. See `references/native.md` for detail.

| Pattern | Severity |
|---|---|
| Event listener / subscription not removed in cleanup | ⚠️ 🟠 Major |
| `NativeModules` called synchronously in render path | ⚠️ 🟠 Major |
| Large object passed over bridge (>10KB) | ⚠️ 🟡 Minor |
| Image loaded without `resizeMode` or explicit `width`/`height` | 🛠️ 🟡 Minor |
| Image source is remote URL without caching strategy | 🛠️ 🟡 Minor |
| New dependency added without checking bundle size impact | ⚪ Info |
| `console.log` left in production code path | 🧹 🔵 Trivial |

## Findings format

Use the same format as `zereight-review`:

```
### [type] [severity] Title

**Condition:** <what triggers this>
**Impact:** <FPS drop / memory leak / jank / crash>
**Evidence:** `file:line` — short snippet
**Minimal fix:** <smallest safe change>
```

## Output template

When running as standalone review:

1. `Performance Summary` (2-3 lines: what changed, overall signal)
2. `⚠️ Performance Findings` (ordered 🟠→🟡→🔵)
3. `🎯 Verdict` (`No regressions` | `Minor regressions` | `Block — performance regression`)

When integrated with `zereight-review`, append findings to the existing `⚠️ Findings` section under a `--- Performance ---` subheader.

## Quick heuristics

- If it touches a list → check FlashList, keyExtractor, and item memoization
- If it touches animation → verify UI thread execution (Reanimated, not setState)
- If it mounts/unmounts → verify all listeners/subscriptions have cleanup
- If it adds a native module call → verify async, not in render, not in hot loop
- If it adds a new package → note bundle size concern as ⚪ Info