performance

Optimize React Native apps with useMemo, useCallback, React.memo, and FlatList settings.

3|Updated Dec 30, 2025
One-click install
npx skills add https://github.com/guicheffer/devorch-cli --skill performance-guicheffer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/guicheffer/devorch-cli/tree/main/templates/skills/react-native-core/performance
Command: npx skills add https://github.com/guicheffer/devorch-cli --skill performance-guicheffer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React Native applications by providing strategies and patterns for optimizing component rendering, data handling, and list performance.

Core Features & Use Cases

  • Memoization: Leverages useMemo and useCallback to cache expensive computations and stable callbacks, preventing unnecessary re-renders.
  • Component Optimization: Utilizes React.memo to optimize individual components, especially within lists.
  • List Performance: Provides techniques for optimizing FlatList performance, including getItemLayout and windowSize adjustments.
  • Use Case: When your app's scrolling becomes laggy or certain screens take too long to load, this Skill offers targeted solutions to identify and fix those performance issues.

Quick Start

Apply performance optimization techniques to the ProductListItem component to improve list rendering speed.

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 FlatList scrolling performance?

Optimize React Native FlatList scrolling by implementing `getItemLayout` to skip measurement and adjusting `windowSize` to control rendered items. These targeted adjustments fix laggy list rendering and reduce resource consumption for better user experience.

When should I use useMemo and useCallback for React Native optimization?

Use `useMemo` and `useCallback` for React Native optimization when you need to cache expensive computations and stabilize callbacks to prevent unnecessary component re-renders. Apply them strategically based on profiling data to ensure effective resource management.

Does React.memo work with FlatList item components?

`React.memo` works with FlatList item components to optimize individual list elements by preventing re-renders when props remain unchanged. Wrapping list items like `ProductListItem` in `React.memo` enhances list rendering speed and overall application performance.

What is the best way to fix slow component rendering in React Native?

The best way to fix slow React Native component rendering is applying memoization techniques with `useMemo` and `useCallback`, alongside `React.memo` for component wrapping. Address bottlenecks strategically using profiling data to enhance user experience.

Why does my React Native app still lag after adding memoization?

React Native apps may still lag after adding memoization if techniques are applied without strategic profiling data. Optimization requires identifying actual bottlenecks first, ensuring `useMemo`, `useCallback`, and `windowSize` adjustments target genuine performance issues.