1k-performance

Implement React and React Native performance patterns in the OneKey monorepo.

Updated Apr 15, 2026
One-click install
npx skills add https://github.com/wanghaisheng/web3-scaffold-app-monorepo --skill 1k-performance-wanghaisheng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: 1k-performance
Source: https://github.com/wanghaisheng/web3-scaffold-app-monorepo/tree/main/.claude/skills/1k-performance
Command: npx skills add https://github.com/wanghaisheng/web3-scaffold-app-monorepo --skill 1k-performance-wanghaisheng

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Performance optimization patterns and best practices for React/React Native applications in the OneKey monorepo.

Core Features & Use Cases

  • Concurrency control: Batched network/bridge calls to minimize UI jank on mobile.
  • Memoization & virtualization: Use memoization, FlashList/windowSize, and stable keys to reduce re-renders and memory pressure.
  • Long list optimization: Use content-visibility and virtualization to render only visible items efficiently.
  • Cross-platform guidance: Apply patterns consistently across web and native codebases with checklists and examples.

Quick Start

Audit the app screens for render hotspots and apply batched concurrency, memoization, and deferred work to a representative list page to observe performance gains.

Frequently Asked Questions about 1k-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I reduce re-renders and memory pressure in long React Native lists?

To reduce re-renders and memory pressure in React Native lists, apply memoization, use FlashList with windowSize configurations, and ensure stable keys to virtualize visible items efficiently.

What's the best way to optimize React performance across web and native monorepos?

The best way to optimize React performance across monorepos is applying consistent patterns like batched concurrency, memoization, and deferred heavy work, validated through cross-platform checklists and examples.

How do I prevent UI jank from network and bridge calls in React Native?

Prevent UI jank in React Native by implementing batched concurrency control for network and bridge calls, which minimizes main thread blocking and smooths mobile application rendering.

When should I use memoization and content-visibility for React list optimization?

Use memoization and content-visibility for React list optimization when auditing screens reveals render hotspots, aiming to render only visible items and defer heavy work to improve performance.

Does this React performance optimization approach work for both web and native platforms?

Yes, this approach applies performance optimization patterns consistently across both web and native platforms within a monorepo, providing checklists and examples to ensure unified improvements.

How do I start auditing React app screens for performance optimization?

Start auditing React app screens for performance optimization by identifying render hotspots, then apply batched concurrency, memoization, and deferred work to a representative list page to observe gains.