Back to Details

zereight-react-native-optimizer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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.
与
zereight-review
搭配使用，适用于以下场景：
  • 审查React Native或Expo PR
  • 审计列表、动画或原生模块改动
  • 检查页面转场或手势交互
它并非
react-native-best-practices
或
vercel-react-native-skills
的替代品——后者会讲解如何优化，本工具则用于检测代码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)
以下skill提供了本工具引用的完整优化上下文：
  • 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
  1. JS线程上运行的动画（会导致可见卡顿——始终标记为🟠严重或更高等级）
  2. 大数据集下使用FlatList而非FlashList做列表渲染
  3. 热点路径（列表项、动画组件）存在不必要重渲染
  4. 内存泄漏（监听器、订阅未清理）
  5. Bridge过度使用（同步调用、大载荷传输）
  6. 包体积回归
  7. 图片加载/缓存问题

Rendering checks

渲染检查

Run on every component change. See 
references/rendering.md
for detail.
PatternSeverity
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
每次组件改动时运行，详情可查看
references/rendering.md
。
问题模式严重等级
包含50+条数据的列表使用FlatList实现🛠️ 🟠 严重
keyExtractor
返回索引值		⚠️ 🟡 次要
向被memo包裹的子组件传递内联函数/对象作为属性🛠️ 🟡 次要
React.memo
包裹的组件每次渲染都会接收新的对象引用		⚠️ 🟡 次要
Context provider层级过高——导致整个子树重渲染⚠️ 🟠 严重
useSelector
选择了store的大片数据		🛠️ 🔵 轻微
传递给子组件的事件处理器缺少
useCallback
包裹		🛠️ 🔵 轻微
StyleSheet
定义在组件体内		🛠️ 🟡 次要

Animation checks

动画检查

Run when animation, gesture, or transition code is changed. See 
references/animation.md
for detail.
PatternSeverity
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
当动画、手势或转场代码改动时运行，详情可查看
references/animation.md
。
问题模式严重等级
使用旧版API 
Animated.Value
而非Reanimated共享值		🛠️ 🟠 严重
动画通过
setState
驱动样式（在JS线程运行）		⚠️ 🟠 严重
Worklet函数直接访问JS侧状态（未使用
runOnJS
）		⚠️ 🟠 严重
useAnimatedStyle
依赖非共享值的响应式数据		⚠️ 🟡 次要
动画场景下使用
TouchableOpacity
而非
GestureDetector
处理触摸事件		🛠️ 🟡 次要
使用
LayoutAnimation
而非Reanimated布局动画		🛠️ 🔵 轻微
组件卸载时未取消动画⚠️ 🟡 次要

Native / bridge checks

原生/Bridge检查

Run when native modules, images, or bundle changes are involved. See 
references/native.md
for detail.
PatternSeverity
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
当涉及原生模块、图片或包改动时运行，详情可查看
references/native.md
。
问题模式严重等级
事件监听器/订阅未在清理阶段移除⚠️ 🟠 严重
在渲染路径中同步调用
NativeModules
⚠️ 🟠 严重
通过Bridge传输大于10KB的大型对象⚠️ 🟡 次要
图片加载未设置
resizeMode
或明确的
width
/
height
🛠️ 🟡 次要
远程URL图片未配置缓存策略🛠️ 🟡 次要
新增依赖未检查包体积影响⚪ 提示
生产环境代码路径中残留
console.log
🧹 🔵 轻微

Findings format

结果输出格式

Use the same format as 
zereight-review
:
undefined
使用和
zereight-review
一致的格式：
undefined

[type] [severity] Title

[type] [severity] Title

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

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.
作为独立审查工具运行时：
  1. 性能总结
    （2-3行：改动内容、整体结论）
  2. ⚠️ 性能问题
    （按🟠→🟡→🔵优先级排序）
  3. 🎯 结论
    （
    无回归
    | 
    轻微回归
    | 
    阻塞——存在性能回归
    ）
与
zereight-review
集成时，将结果追加到现有
⚠️ Findings
板块下的
--- Performance ---
子标题中。

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
  • 如果改动涉及列表 → 检查FlashList、keyExtractor和列表项memoization
  • 如果改动涉及动画 → 确认在UI线程执行（使用Reanimated，而非setState）
  • 如果改动涉及组件挂载/卸载 → 确认所有监听器/订阅都有清理逻辑
  • 如果新增原生模块调用 → 确认是异步调用、未在渲染过程中调用、未在热点循环中调用
  • 如果新增第三方包 → 将包体积风险标记为⚪ 提示