Context
You’re on a fintech team shipping a React Native app used by 12M monthly active users across low-end Android devices and iPhones. A recent release increased cold start time by 350ms and pushed P95 frame drops above the team’s SLO, impacting checkout conversion and triggering incident reviews. The diff shows multiple new third-party libraries added for analytics, UI components, and cryptography.
Core Question
Explain the performance implications of using third-party libraries in React Native, and how you would evaluate and mitigate them. Cover the following:
-
Bundle size & startup
- How JS bundle size affects download time, parse/compile time, and memory.
- How tree-shaking, dead-code elimination, and Metro bundler behavior influence real bundle impact.
-
Runtime overhead on the JS thread
- How heavy libraries can increase work on the JS event loop and cause dropped frames.
- What patterns (e.g., frequent allocations, deep object graphs, excessive listeners) typically hurt performance.
-
Native module and bridge costs
- How crossing the JS↔Native boundary affects latency and throughput.
- How the New Architecture (JSI/TurboModules/Fabric) changes the trade-offs versus the classic bridge.
-
Operational risks
- How dependency update cadence, transitive dependencies, and platform-specific code paths affect stability and performance.
- How you’d prevent regressions (profiling gates, bundle budgets, performance CI).
Scope Guidance (what depth is expected)
- Discuss what happens under the hood (JS bundle loading, JS thread vs UI thread, bridge/JSI calls).
- Provide a concrete evaluation plan: what you measure (e.g., cold start, TTI, P95 FPS, memory), and what tools you’d use.
- Explain trade-offs and decision criteria: when you’d accept a dependency, fork it, replace it, or implement a minimal in-house alternative.
