Context

You’re building a React Native feed for a large e-commerce marketplace (think flash sales + personalized recommendations) with 5–10M DAUs. A typical session scrolls through hundreds to thousands of items, each row containing images, price badges, and dynamic inventory status. On mid-tier Android devices, the team is seeing scroll jank, dropped frames, and occasional OOMs—directly impacting conversion during high-stakes events like Black Friday.

Core Question

How would you optimize list rendering in a React Native application to keep scrolling smooth and memory stable?

In your answer, cover:

1. Virtualization/windowing strategy: How you decide what to render, what to recycle, and how to tune the window size.
2. Reducing unnecessary re-renders: How to ensure rows don’t re-render on unrelated state changes (stable props, memoization, selectors).
3. Key extraction and item identity: Why stable keys matter and what goes wrong with index keys.
4. Measuring and validating improvements: What metrics/tools you’d use (FPS, JS thread time, commit counts) and how you’d run an experiment.

Scope Guidance

Assume you can change code in the screen and row components, but you can’t rewrite the app in a different framework. Discuss trade-offs (CPU vs memory, responsiveness vs prefetching) and call out common pitfalls (inline callbacks, dynamic row heights, image decoding). You may reference React Native primitives like FlatList/SectionList and general UI rendering principles, but focus on the underlying engineering reasoning rather than API trivia.