Yashotantra Academy logo
← React Native theorytheory 0/50 · 0%
level 1
Curious · 0 XP
streak
0d
perfect
0
badges
0

100 XP to Apprentice

Performance · medium

33. Performance profiling

Finding and fixing slow renders.

1 min read3 questionsup to 50 XPtopic 33/50

Read in another language

AI translates the explanation and quiz text while preserving code and answer scoring.

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.

How to study this topic

  1. 1. Read the explanation once end to end, skipping the code.
  2. 2. Re-read the code snippets and say out loud what each line does.
  3. 3. Answer the quiz without scrolling back — that is the real check.
  4. 4. Read every explanation, even for the answers you got right.

Scoring

  • · Up to 30 XP from quiz accuracy.
  • · +15 XP for a perfect first attempt.
  • · +5 XP while a 3-day streak is running.
  • · 75% or higher marks the topic complete.

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?

Badges

First light
Pass your first topic
Sharp shooter
3 perfect first-try quizzes
On a roll
Study 3 days in a row
Week warrior
Study 7 days in a row
Grinder
Earn 500 XP
Deep diver
Earn 1500 XP