AI Summary
→ WHAT IT COVERS Coinbase Staff Engineer Manjiri Mboge explains how her team scales React Native across millions of global users, covering four performance metric buckets, data fetching anti-patterns, GraphQL with Suspense instrumentation, the new React Native architecture with JSI and Turbo Modules, and AI-assisted development workflows that now generate over 50% of Coinbase's code. → KEY INSIGHTS - **Performance Measurement Framework:** Divide mobile app performance into four distinct buckets: cold start time (app launch to main screen), inter-screen navigation smoothness, error rates blocking user journeys, and end-to-end task completion time such as opening the app through completing a crypto trade. Avoid measuring too many metrics simultaneously — narrow focus produces actual improvements rather than boiling the ocean. - **Data Fetching Anti-Patterns:** Two patterns consistently degrade reliability at scale. First, over-fetching triggers unnecessary React re-renders and fans out one client request into potentially 100 downstream microservice calls. Second, polling that persists across navigation stack screens continues hitting backend services even when users have moved away, adding compounding API load that compounds under high-traffic price-movement events. - **GraphQL Defer + Suspense Instrumentation:** Structure each screen around a single GraphQL query with child component fragments, then use GraphQL's defer directive to load non-critical fields after the primary UI renders. Coinbase measures total screen render time using Suspense instrumentation tied to these deferred components, replacing full-screen spinners with contextual loading states that keep users engaged during data fetches. - **React Native New Architecture Wins:** Enabling the new React Native architecture eliminates the legacy bridge between JavaScript and native threads via the JavaScript Interface (JSI), removing the round-trip latency that previously slowed native module calls. Turbo Modules accelerate specific native interactions like camera access and keychain operations. Teams should also update React Native versions proactively, as infrastructure upgrades independently improve cold start metrics beyond code-level optimizations. - **AI-Assisted Code Quality at Scale:** Coinbase uses contextual `agents.md` files scoped to specific code areas so AI agents automatically include required instrumentation — screen names, page metadata, rendering metrics hooks — when generating UI components. AI is also used to surface ESLint violations across pull requests, flagging patterns like missing cache policies or active polling, reducing back-and-forth review cycles and enforcing standards without relying on developer memory. → NOTABLE MOMENT Mboge describes how performance problems follow a roughly two-year cycle at Coinbase — teams fix a metric, ship new code, onboard new engineers, and the same degradation reappears. Her conclusion is that performance improvement is pattern recognition and execution, not heroic engineering, making automation and guardrails the only durable solution. 💼 SPONSORS [{"name": "Turbopuffer", "url": "https://turbopuffer.com/sed"}, {"name": "Guardsquare", "url": "https://www.guardsquare.com"}, {"name": "Estuary", "url": "https://estuary.dev"}] 🏷️ React Native, Mobile Performance Optimization, GraphQL, AI-Assisted Development, Reliability Engineering