Reimagining Lists in Native
summary
React Native adds virtual view (shipped in 0.82) and experimental virtual column/virtual row (targeted for 0.83) to fix list blanking by using synchronous events to let the main thread render visible items while background rendering handles pre-renders. Virtual view defines hidden / pre-render / visible regions, lazily mounts cells, and prioritizes rendering; it relies on Hermes and runtime scheduling. Trade-offs include main-thread frame risk from JS blocking and batched events, so concurrent/yieldable work and dynamic pre-render sizes are also explored.
AI-written summary · about
chapters (8)
- 0:00Introduction and new architecture
- 2:54Understanding list blanking
- 6:15Mitigation and synchronous rendering
- 8:03React Native event loop and runtime
- 10:55Implementing synchronous rendering
- 14:40VirtualView component
- 17:11Virtual collections implementation
- 20:55Future outlook and conclusion
