Skip to main content

Performance

Benchmarks and optimization tips for SectionFlow.

Benchmarks​

Rendering 10,000 Items​

MetricSectionListFlashListSectionFlow
Initial Render2,400ms180ms195ms
Memory Usage450MB120MB125MB
Scroll FPS45fps60fps60fps
Section SupportYesNoYes

Tested on iPhone 13 Pro, React Native 0.73

Key Takeaways​

  • SectionFlow delivers FlashList-level performance while supporting sections
  • Cell recycling dramatically reduces memory usage
  • Smooth 60fps scrolling even with large datasets

Optimization Tips​

1. Set Estimated Item Size​

Always provide an estimated item height:

<SectionFlow
  estimatedItemSize={80} // Average height of your items
  estimatedSectionHeaderSize={40}
/>

2. Use keyExtractor​

Help SectionFlow identify items efficiently:

<SectionFlow
  keyExtractor={(item) => item.id}
  // ...
/>

3. Memoize Render Functions​

Prevent unnecessary re-renders:

const renderItem = useCallback(({ item }) => (
  <MemoizedItem item={item} />
), []);

const MemoizedItem = React.memo(({ item }) => (
  <View>
    <Text>{item.title}</Text>
  </View>
));

4. Optimize Images​

Use cached, properly sized images:

// Good
<Image
  source={{ uri: item.thumbnail }}
  style={{ width: 50, height: 50 }}
/>

// Better - with caching library
<FastImage
  source={{ uri: item.thumbnail }}
  style={{ width: 50, height: 50 }}
/>

5. Avoid Inline Styles​

Create styles once with StyleSheet:

// Bad - creates new object each render
<View style={{ padding: 16, backgroundColor: 'white' }}>

// Good - reuses same object
<View style={styles.item}>

const styles = StyleSheet.create({
  item: { padding: 16, backgroundColor: 'white' }
});

6. Use windowSize Wisely​

Control how many items render outside viewport:

<SectionFlow
  windowSize={11} // Renders 5 screens worth above/below
  // Lower = less memory, higher = smoother fast scrolling
/>

7. Batch Data Updates​

When updating many items, batch the changes:

// Bad - multiple state updates
items.forEach(item => {
  setSections(prev => updateSection(prev, item));
});

// Good - single state update
setSections(prev => {
  return items.reduce((acc, item) => updateSection(acc, item), prev);
});

Debugging Performance​

Enable Performance Monitor​

import { PerformanceObserver } from 'react-native';

// In development
if (__DEV__) {
  // Use React DevTools Profiler
  // Or enable Performance Monitor in dev menu
}

Common Issues​

Symptom: Janky scrolling

  • Check for expensive computations in render functions
  • Look for missing keys or changing keys
  • Verify images are properly cached

Symptom: High memory usage

  • Reduce windowSize
  • Enable removeClippedSubviews on Android
  • Check for memory leaks in item components

Symptom: Slow initial render

  • Set accurate estimatedItemSize
  • Reduce initialNumToRender
  • Lazy load heavy content

Live Performance Demo​