Going Over The Speed Limit Synchronous Rendering in React Native
summary
Proposes adding synchronous rendering to React Native by recording a native “recipe” at app init and replaying it natively to avoid bridge roundtrips, eliminating list and navigation white flicker (demo handles a 5,000-photo list). Implements a sync registry that runs a one-time render, swizzles UIManager to capture UIManager commands into JSON, and exposes an RCTSyncRootView with create/update props that instantiates views natively. Moves latency to startup (milliseconds), works for purely declarative row templates but fails if cells contain arbitrary JavaScript logic; proof‑of‑concept lives on Wix’s GitHub.
AI-written summary · about
chapters (8)
- 0:00Introduction and context
- 3:12Major gaps in React Native
- 7:26Synchronous vs non-blocking design
- 13:20Root cause of flickering issues
- 19:22Introducing synchronous rendering
- 24:54Implementing the solution
- 30:50Limitations and future work
- 31:31Q&A and conclusion
related talks
29mPerformance Limitations of React Native and How to Overcome Them
30mLiving in an async world of React Native
31mReact Native in 40 minutes
30mReact Native
24mThe Performance Myths of React Native apps
28mThe State of React Native
01h 01mReact Native: A Better Way to Do Mobile
41mReact Native - A native love story