performance

Optimize React and React Native app performance with rendering and network guidelines.

3|2|Updated Feb 11, 2026
One-click install
npx skills add https://github.com/Paxeer-Network/Sidiora-Perpetual-Protocol --skill performance-paxeer-network
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/Paxeer-Network/Sidiora-Perpetual-Protocol/tree/main/.windsurf/skills/performance
Command: npx skills add https://github.com/Paxeer-Network/Sidiora-Perpetual-Protocol --skill performance-paxeer-network

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React and React Native applications, ensuring smooth user experiences by optimizing rendering, network requests, and resource usage.

Core Features & Use Cases

  • Concurrency Control: Manages simultaneous network requests to prevent UI freezes.
  • Bridge Optimization: Minimizes data transfer and crossings over the React Native bridge.
  • List Rendering: Provides strategies for efficient rendering of long lists using FlashList or windowSize adjustments.
  • Memoization: Guides on using memo, useMemo, and useCallback to prevent unnecessary re-renders.
  • Use Case: Your React Native app is lagging during data loading. Use this Skill to identify and fix the root cause, such as too many concurrent API calls or inefficient list rendering.

Quick Start

Use the performance skill to optimize the rendering of a long list in your React Native application.

Frequently Asked Questions about performance

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

FAQPage Schema
How do I optimize React Native list rendering for large datasets?

Optimize React Native list rendering by using FlashList and adjusting the windowSize property. This approach recycles views and limits the active render window, reducing memory overhead and preventing UI freezes during long list scrolling.

Why does my React Native app freeze during concurrent network requests?

React Native app freezes occur when unmanaged concurrent network requests block the main thread. Implement concurrency control to manage simultaneous API calls, queue requests, and protect the main thread to ensure smooth UI rendering during data loading.

What's the best way to prevent unnecessary re-renders in React?

Prevent unnecessary React re-renders by applying memoization techniques using `memo`, `useMemo`, and `useCallback`. These tools cache components, values, and functions, stopping redundant render cycles when parent components update without changing child dependencies.

How can I minimize data transfer over the React Native bridge?

Minimize React Native bridge crossings by batching data transfers and reducing the payload size passed between the native and JavaScript threads. Optimizing bridge traffic prevents UI bottlenecks and ensures smooth application performance.

Can I use memoization to fix React Native rendering lag?

Yes, you can use memoization to fix React Native rendering lag. By wrapping components with `memo` and utilizing `useMemo` and `useCallback`, you prevent unnecessary re-renders and protect the main thread from expensive recalculations.

When should I adjust the windowSize in a React Native list?

Adjust the React Native list windowSize when experiencing memory pressure or stuttering during scrolling. Lowering the windowSize reduces the number of off-screen items rendered, trading slight rendering latency for improved memory usage and performance.