← Back to Chapters

React Native Performance Optimization

⚡ React Native Performance Optimization

? Quick Overview

Performance optimization in React Native focuses on reducing unnecessary re-renders, improving UI responsiveness, optimizing memory usage, and ensuring smooth animations. A well-optimized app delivers better user experience, lower battery consumption, and faster load times.

? Key Concepts

  • Avoid unnecessary re-renders
  • Use optimized list components
  • Memoization and pure components
  • Efficient image and asset handling
  • Offloading heavy work from the JS thread

? Syntax / Theory

React Native uses a JavaScript thread and a native UI thread. Performance issues usually occur when heavy logic blocks the JS thread or when frequent re-renders overload the reconciliation process.

Key tools include React.memo, useCallback, useMemo, FlatList, and InteractionManager.

? Code Example(s)

? View Code Example 
// Using React.memo to prevent unnecessary re-renders
import React from "react";
import { Text } from "react-native";

const OptimizedText = React.memo(({ value }) => {
return {value};
});

export default OptimizedText;
? View Code Example 
// Optimized FlatList for rendering large lists
import { FlatList, Text } from "react-native";

const data = Array.from({ length: 1000 }, (_, i) => i);

export default function App() {
return (
 item.toString()}
renderItem={({ item }) => {item}}
initialNumToRender={10}
/>
);
}

? Live Output / Explanation

What Happens?

The React.memo example prevents re-rendering unless props change, while FlatList renders only visible items instead of the entire list at once.

? Interactive Example: Memoization Visualizer

Click the button below to update the Parent State. Notice how the two components react.

Parent Count: 0

❌ Normal Component

0
Total Renders

Re-renders every time parent updates, even if props didn't change.

✅ Memoized Component

0
Total Renders

Only re-renders if its own props change (saved resources).

This visualization mimics React.memo. In a real app, the "Normal" component would waste CPU cycles redrawing the same content, causing lag.

? Use Cases

  • Large data lists (chat apps, feeds)
  • Animation-heavy screens
  • Low-end Android devices
  • Battery-sensitive applications

? Tips & Best Practices

  • Always use FlatList instead of ScrollView for long lists
  • Memoize callbacks with useCallback
  • Resize and cache images properly
  • Avoid inline functions inside JSX
  • Use production builds for testing performance

? Try It Yourself

  1. Create a list with 5,000 items using ScrollView
  2. Replace it with FlatList
  3. Profile performance using React Native DevTools
  4. Apply React.memo and compare results