ShipAdvanced6h

Performance profiling.

Finding jank, slow renders, and memory issues.

What is performance profiling on mobile?

Profiling is measuring where your app spends time and memory so you can fix what actually matters. On mobile that means hunting dropped frames (jank), slow renders, oversized re-renders, and memory leaks, using profilers rather than guessing.

Why it matters

Performance is felt directly on mobile — stutter, lag, and crashes drive uninstalls and bad reviews. The constraints are tighter than the web: less memory, weaker CPUs, battery limits. Profiling turns "it feels slow" into a specific, fixable cause, which is a senior-level skill.

What to learn

  • The two threads: JS and native UI
  • Measuring frame rate and finding jank
  • The React DevTools Profiler for slow renders
  • Memoization to cut unnecessary re-renders
  • Memory profiling and leaks
  • Hermes engine and startup time
  • Measuring before and after a fix

Common pitfall

Optimizing by guesswork — memoizing everything, rewriting code that was never the problem. Without profiling you usually fix the wrong thing and add complexity for no gain. Measure first to find the real bottleneck, change one thing, and measure again to confirm it helped.

Resources

Primary (free):

Practice

Profile a screen that feels slow: use the React Profiler to find unnecessary re-renders and watch the frame rate while scrolling a list. Fix the worst offender with memoization, then re-measure. Done when you can show a before-and-after number and name the real bottleneck.

Outcomes

  • Measure frame rate and find jank.
  • Use the Profiler to locate slow renders.
  • Cut unnecessary re-renders with memoization.
  • Profile before and after instead of guessing.
Back to Mobile roadmap