React Native Component Lifecycle Deep Dive

Context

You’re on a fintech mobile team shipping a React Native app with 5M+ monthly active users. A new “instant card controls” screen (freeze/unfreeze, spending limits) is causing intermittent bugs: duplicate network calls, stale UI after navigation, and occasional memory leaks from listeners.

These issues often come down to misunderstanding the lifecycle of a React Native component—especially how React schedules renders, when effects run, and how cleanup interacts with navigation and app backgrounding.

Core Question

Walk me through the lifecycle of a React Native component from creation to destruction, and tie it to real behaviors:

1. Mount phase: What happens from initial render through commit? When do useEffect and useLayoutEffect run? Where do subscriptions and initial fetches belong?
2. Update phase: What triggers a re-render (props/state/context)? How does React batch updates, and what does “render must be pure” mean? How do effects re-run and clean up on dependency changes?
3. Unmount phase: What runs during teardown? How do you prevent memory leaks (timers, event listeners, native subscriptions)?

Scope Guidance (what depth is expected)

• Answer for both function components (hooks) and class components.
• Include the distinction between render and commit phases.
• Mention React Native-specific considerations (navigation focus, AppState, native event emitters) without going into platform APIs.
• Call out common pitfalls (infinite loops, stale closures, double-invocation in Strict Mode, and cleanup mistakes).