Xuan Huang contrasts the web’s single main thread with React Native’s earlier asynchronous Paper architecture and today’s Fabric renderer. A single thread enables synchronous layout measurement and scheduling control, but expensive renders can drop frames. Paper avoids blocking the main thread, while its asynchrony can make input and frame timing harder to control.
React for Two Threads
Speakers
Xuan Huang, who works with the React, React Native, and Hermes teams; Ziqi Zhen, a software developer at Vance; and Haoyang Wang present React Lynx and its two-thread React model at React Universe Conf 2025.
Ziqi Zhen and Xuan describe rendering a static first frame on the main thread, then hydrating it on the background thread. They call this instant first-frame rendering. For a slider, moving event handling to the main thread avoids cross-thread latency; main-thread components aim to retain synchronous updates while restoring React’s component reactivity and lifecycle. Those components are experimental, while the rest of React Lynx is described as production-ready.
The presenters credit Reanimated Worklets, Next.js and React Server Components, and Preact as influences on React Lynx. Lynx is an open-source cross-platform technology used at TikTok, and its model runs JavaScript on both a background thread and the main thread. The team presents the approach as a way to combine parallel work with React’s structured programming model.
Haoyang Wang demonstrates a React app where decoding HEIC images on the main thread brings the lowest frame rate to four FPS. With Web Workers handling background work, the demo reaches about 60 FPS. For Lynx on the web, the team reuses JavaScript and CSS bundles and chooses browser styling and painting, including web components and Shadow DOM to handle selector isolation. A Rust tokenizer cuts time to interactive by about 40% compared with the JavaScript transformer.
Takeaways
- Move CPU-heavy work, such as image decoding, off the browser’s main thread to protect animation frame rates.
- Keep latency-sensitive event handlers on the UI thread when a cross-thread round trip makes interactions feel delayed.
- Treat main-thread components as experimental; they are intended to keep React reactivity and lifecycle while enabling synchronous UI updates.
- When adapting a rendering system for the web, account for accessibility, screen-reader support, testing, bundle size, and integration with existing pages.
- The talk’s Lynx for Web approach reuses JavaScript and CSS bundles and relies on browser styling and painting.
Mentioned in this talk
Search inside this talk
What was claimed 12
- feature
Callstack: React and React Native development experts“brought to you by CodeStack, React and React Native development experts”
0:04inWhat went wrong?! Deep dive into debugging RN applicationsYouTube Verified3 sources· Talk
- featureReact: Declarative programming model that makes asynchronous updates feel natural
“React is declarative, and that programming model makes asynchronous updates feel natural”
YouTube Unverified1 source· Talk
- featureFabric: Balances synchronous and asynchronous updates
“trying to be smart about when to do synchronous updates and when to do asynchronous updates”
YouTube Unverified1 source· Talk
- works at
“I'm a software developer at Vance”
YouTube Unverified1 source· Talk
- featureInstant first-frame rendering: Displays content instantly when the page loads
“the ability to display content instantly when the page loads”
YouTube Unverified1 source· Talk
- featureMain-thread functions: Allows functions and event handlers to run on the main thread
“it allows functions and event handlers to run on the main thread”
YouTube Unverified1 source· Talk
- featureMain-thread components: Experimental components execute on the main thread with React reactivity and lifecycle
“MTCs are still in a very early experimental stage”
YouTube Unverified1 source· Talk
- featureMain-thread components: Support passing background functions as props
“MTCs also support passing background functions as props”
YouTube Unverified1 source· Talk
- usesLynx React uses Preactcurrent implementation is based on Preact
“our current implementation is based on Preact”
YouTube Unverified1 source· Talk
- featureLynx: Cross-platform technologies for writing code once and rendering anywhere
“we want you to write code once and render anywhere”
YouTube Unverified1 source· Talk
- usesLynx React uses Web workersdual-thread model in browsers
“Web Workers—then everything could work great”
YouTube Unverified1 source· Talk
- featureLynx Web Platform: Lynx engine implementation with dual-threading model support based on Web Workers
“a Lynx engine implementation with dual-threading model support based on Web Workers”
YouTube Unverified1 source· Talk
