React Native theorytheory 0/50 · 0%
Performance · medium

33. Performance profiling

Finding and fixing slow renders.

Unnecessary re-renders are the most common React Native performance issue — often caused by inline object/function literals passed as props to memoized children, defeating `React.memo`.

// Bad: new object every render defeats memo
<Row style={{ padding: 8 }} onPress={() => doThing(id)} />

// Better: stable references
const rowStyle = useMemo(() => ({ padding: 8 }), []);
const onPress = useCallback(() => doThing(id), [id]);
<Row style={rowStyle} onPress={onPress} />

The React DevTools Profiler (or the RN Perf Monitor overlay) shows which components re-render and why, letting you target real bottlenecks instead of guessing.

Check your understanding

  1. 1. What commonly defeats React.memo optimizations?

  2. 2. What tool helps identify why components re-render?

  3. 3. What's a fix for unstable prop references?