1k-performance
Guide for optimizing React application performance and resolving bundle size or memory issues.
Install
mkdir -p .claude/skills/1k-performance && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1565" && unzip -o skill.zip -d .claude/skills/1k-performance && rm skill.zipInstalls to .claude/skills/1k-performance
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Performance optimization for React/React Native — re-renders, memoization, FlashList, memory leaks, and bundle size.Key capabilities
- →Optimize list rendering with FlashList
- →Implement memoization for expensive computations
- →Control concurrent network requests
- →Identify and fix memory leaks
How it works
It applies performance patterns such as batching network requests, memoizing components, and using optimized list components to reduce UI blocking.
Inputs & outputs
When to use 1k-performance
- →Debug slow re-renders in a React component
- →Reduce bundle size in a React Native app
- →Identify and fix memory leaks
- →Implement FlashList for large data sets
About this skill
OneKey Performance Optimization
Performance optimization patterns and best practices for React/React Native applications in the OneKey monorepo.
Quick Reference
| Category | Key Optimization | When to Use |
|---|---|---|
| Concurrent Requests | Limit to 3-5, use executeBatched | Multiple API calls, network-heavy operations |
| Bridge Optimization | Minimize crossings, batch data | React Native bridge overhead, iOS/Android |
| List Rendering | FlashList, windowSize={5}, content-visibility | Lists with 100+ items |
| Memoization | memo, useMemo, useCallback | Expensive computations, prevent re-renders |
| Heavy Operations | InteractionManager, setTimeout | UI 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:
| Component | Optimization | Details |
|---|---|---|
ListView | windowSize={5} | Auto-limits visible items |
Tabs | contentVisibility: 'hidden' | Hides inactive tabs |
Dialog | contentVisibility: '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)
When not to use it
- →Small-scale applications without performance bottlenecks
Prerequisites
Limitations
- →Requires React/React Native context
- →Performance gains depend on specific use cases
How it compares
It provides specific rules for React performance bottlenecks, whereas manual optimization often overlooks bridge overhead or concurrency limits.
Compared to similar skills
1k-performance side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| 1k-performance (this skill) | 4 | 29d | No flags | Advanced |
| genie | 0 | 1mo | Review | Advanced |
| tamagui | 24 | 6mo | Review | Intermediate |
| frontend-mobile-development-component-scaffold | 1 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by OneKeyHQ
View all by OneKeyHQ →You might also like
genie
Genie-sa
Drive live DevTools on a RUNNING React, React Native, or TanStack app with the `genie-react` CLI. Use it to inspect components, explain renders, audit effect schedules and hotness, read Query or Router state, force hard-to-reach UI, and prove a change with repeated runtime captures. Pair it with age
tamagui
tamagui
Universal React UI framework for web and native. Use when building cross-platform apps with Tamagui, creating styled components with `styled()`, configuring design tokens/themes, using Tamagui UI components, or working with animations. Triggers: "tamagui", "styled()", "$token", "XStack/YStack", "useTheme", "@tamagui/*" imports, "createStyledContext", "variants".
frontend-mobile-development-component-scaffold
sickn33
You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
rendering-animate-svg
TheOrcDev
Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations.