Question

React Native list scrolls at 20 fps after Claude Code 'optimized' it

Solved · 337 viewsasked 4 weeks ago by ben_mobile

It added useMemo and useCallback everywhere. Scrolling got worse.

What I’ve tried

Removed some of the memos and callbacks again. Marginal difference, still stutters on scroll.

Comment

2 answers

Marked as helpful by the asker

ben_mobile4 weeks ago

Memoization has a cost; sprinkling it everywhere is not optimization. What actually fixes list scrolling:

FlatList with getItemLayout if rows have a fixed height.
Row component wrapped in React.memo with a stable keyExtractor.
No inline arrow functions passed to rows (onPress={() => ...} recreates per render).
Images with explicit width/height.

Measure with the Perf Monitor before and after each one. Ask Claude Code for one change at a time, with the fps number as the acceptance test.

Comment

hiro_t4 weeks ago

If you've done all four and it's still not smooth on low-end Android: try FlashList. It's a drop-in replacement for FlatList that recycles row views instead of mounting new ones. Same props, plus estimatedItemSize. On one of our lists it went from 35 to 58 fps without touching the rows.

Do the four fixes first though. FlashList with a slow row component is still a slow list.

Comment

Tried it on the orders screen after the other fixes: 57 fps on a five-year-old Android. Keeping it. ben_mobile 4 weeks ago

Keyboard shortcuts

React Native list scrolls at 20 fps after Claude Code 'optimized' it

What I’ve tried

2 answers

Your answer

React Native list scrolls at 20 fps after Claude Code 'optimized' it

What I’ve tried

2 answers

Related

Your answer