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:
- Mount phase: What happens from initial render through commit? When do
useEffect and useLayoutEffect run? Where do subscriptions and initial fetches belong?
- 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?
- 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).