1k-performance_skill

Overview

This skill provides targeted performance optimization patterns for React and React Native apps focused on re-renders, memoization, list rendering, bridge cost, memory leaks, and bundle size. It collects practical rules, helper utilities, and built-in component behaviors used to keep UI responsive and reduce resource usage. The guidance is concise and ready to apply to mobile, web, and desktop React projects.

How this skill works

The skill inspects common performance pitfalls and prescribes concrete fixes: batching concurrent requests with a concurrency limiter, minimizing React Native bridge crossings, using FlashList and tuned windowSize for long lists, and applying memo/useCallback to prevent unnecessary renders. It also recommends offloading heavy work via InteractionManager or setTimeout, and highlights components that are already optimized to avoid redundant work.

When to use it

• When many network requests can overwhelm the UI thread or device (use batched execution).
• When lists exceed ~100 items or show jank while scrolling (use FlashList and windowSize tuning).
• When frequent re-renders occur due to unstable props or inline functions (apply memo/useCallback/useMemo).
• When native bridge calls are frequent or carry large payloads (batch and minimize crossings).
• When heavy synchronous work blocks frames or causes AppHang on iOS (offload to InteractionManager or schedule async).

Best practices

• Limit concurrent requests to 3–5; use an executeBatched helper to run Promise-returning tasks in small batches.
• Prefer FlashList for large lists and set windowSize to 5 for typical mobile use; use contentVisibility to hide inactive views.
• Memoize expensive computations and callbacks: wrap pure components with memo and use useMemo/useCallback for derived values and handlers.
• Batch data sent over the React Native bridge and avoid frequent round-trips; serialize less and reduce payload size.
• Move non-UI heavy work off the main thread using InteractionManager, requestIdleCallback, or background workers where available.

Example use cases

• Loading assets and account data for dozens of wallets without freezing the UI by running fetches with executeBatched(concurrency=3).
• Replacing FlatList with FlashList and tuning windowSize for a transaction history screen with 1000+ rows.
• Fixing repeated re-renders by memoizing a transaction row component and stabilizing handler props with useCallback.
• Batched native calls when syncing account state to reduce bridge crossings on Android and iOS.
• Deferring image decoding and heavy parsing to after initial render using InteractionManager to prevent first-frame jank.