5 React Native Performance Tips That Actually Work

React Native performance can be tricky. You build a great app, but then users complain about lag and slow animations. Here are 5 practical tips that I've used in production apps to boost performance significantly.

1. Use React.memo() Wisely

Don't wrap every component in React.memo(). Only use it for components that:

• Render frequently
• Have expensive render logic
• Receive props that don't change often

// Good use case
const ExpensiveComponent = React.memo(({ data }) => {
  // Expensive calculations here
  return <div>{/* complex UI */}</div>
})

// Bad use case - simple component
const SimpleText = React.memo(({ text }) => <Text>{text}</Text>)

2. Optimize FlatList Rendering

FlatList is powerful but can be a performance killer if not configured properly:

<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  windowSize={10}
/>

3. Avoid Inline Functions

Inline functions create new function instances on every render, causing unnecessary re-renders:

// ❌ Bad - creates new function every render
<Button onPress={() => handlePress(id)} />

// ✅ Good - stable reference
const handlePress = useCallback((id) => {
  // handle press logic
}, [])

<Button onPress={() => handlePress(id)} />

4. Use InteractionManager for Heavy Operations

Defer heavy operations until after animations complete:

import { InteractionManager } from 'react-native'

// Wait for animations to finish
InteractionManager.runAfterInteractions(() => {
  // Heavy operation here
  loadData()
  processImages()
})

5. Profile and Measure

Always measure performance before and after optimizations. Use React DevTools Profiler and Flipper to identify bottlenecks.

Wrapping Up

Performance optimization is an iterative process. Start with these tips, measure the impact, and then move on to more advanced techniques. Remember, premature optimization is the root of all evil - optimize when you have actual performance issues.

What performance tips have worked for you? Share your experiences in the comments below!