mcpField
1
1k-performance

1k-performance

github.com/onekeyhqDevelopment2.5k63 installsUpdated today
Repository

About 1k-performance

A performance guidance skill for React and React Native development in the OneKey monorepo. It focuses on request batching, rendering, bridge usage, and avoiding UI-blocking work.

Key features

  1. 01Batched concurrent requests
  2. 02React Native bridge optimization
  3. 03List rendering guidance
  4. 04Memoization patterns
  5. 05Heavy operation scheduling

Use cases

  1. 01Limit concurrency across multiple API calls
  2. 02Improve rendering of long lists
  3. 03Reduce unnecessary component re-renders

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/onekeyhq/app-monorepo --skill 1k-performance

After installing, type/1k-performancein Claude Code to confirm it loaded.

Bundled filesreferences/rules/performance.md

Details

From the project README

OneKey Performance Optimization

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

Quick Reference

CategoryKey OptimizationWhen to Use
Concurrent RequestsLimit to 3-5, use executeBatchedMultiple API calls, network-heavy operations
Bridge OptimizationMinimize crossings, batch dataReact Native bridge overhead, iOS/Android
List RenderingFlashList, windowSize={5}, content-visibilityLists with 100+ items
Memoizationmemo, useMemo, useCallbackExpensive computations, prevent re-renders
Heavy OperationsInteractionManager, setTimeoutUI blocking operations

Critical Performance Rules

❌ FORBIDDEN: Too Many Concurrent Requests
// ❌ BAD - Can freeze UI with 15+ requests
const requests = items.map(item => fetchData(item));
await Promise.all(requests);
✅ CORRECT: Batched Execution with Concurrency Limit
async function executeBatched<T>(
  tasks: Array<() => Promise<T>>,
  concurrency = 3,
): Promise<Array<PromiseSettledResult<T>>> {
  const results: Array<PromiseSettledResult<T>> = [];
  for (let i = 0; i < tasks.length; i += concurrency) {
    const batch = tasks.slice(i, i + concurrency);
    const batchResults = await Promise.allSettled(
      batch.map((task) => task()),
    );
    results.push(...batchResults);
  }
  return results;
}

const tasks = items.map(item => () => fetchData(item));
await executeBatched(tasks, 3); // Max 3 concurrent

🚨 Built-in Optimizations

Already Optimized - NO ACTION NEEDED:

ComponentOptimizationDetails
ListViewwindowSize={5}Auto-limits visible items
TabscontentVisibility: 'hidden'Hides inactive tabs
DialogcontentVisibility: 'hidden'Hides when closed

Detailed Guide

For comprehensive performance optimization strategies, see performance.md.

Topics covered:

  • Concurrent request control
  • React Native bridge optimization
  • Heavy operations offloading
  • List rendering (windowSize, FlashList, content-visibility)
  • Memoization & callbacks
  • State updates optimization
  • Image optimization
  • Async operations & race conditions
  • Real-world iOS AppHang case study

Related Skills

  • /1k-coding-patterns - General coding patterns and conventions
  • /1k-sentry - Sentry error analysis (includes performance issues)

Comments

Markdown supported