tezvyn:

The JS thread and why it bottlenecks performance

AI-drafted, machine-checkedSource: interviewbeginner
WHAT IT TESTS

RN threading basics.

OUTLINE

a single thread runs your JS, React reconciliation, and event handling; blocking it delays updates and gestures, and it is separate from the UI thread.

WHAT THIS TESTS Whether you understand that React Native splits work across threads and that your code runs on a single JS thread whose blocking is the most common source of performance problems.

A GOOD ANSWER COVERS React Native runs on several threads. The JS thread executes your application's JavaScript: component logic, React's reconciliation to compute what changed, event handling, network callbacks, and animations not offloaded natively. The native UI thread, separate from it, lays out and draws the actual views. Because JavaScript is single-threaded, the JS thread can only do one thing at a time; any long synchronous operation, such as a heavy loop, parsing a large JSON response, or expensive reconciliation from too many re-renders, blocks the thread. While blocked it cannot dispatch state updates, schedule list item rendering, or respond to touches, so the app feels frozen or janky even when the UI thread is idle. This is why it is the primary bottleneck: most app logic funnels through it. Mitigations include offloading animations to the native driver or Reanimated, moving heavy work off the critical path, virtualizing lists, and reducing unnecessary re-renders.

COMMON WRONG ANSWERS Saying JavaScript runs in parallel across cores. Believing the JS thread draws pixels; that is the UI thread. Thinking that because native is fast, JS work cannot cause jank. Confusing the bridge with the JS thread. Assuming async/await makes blocking work non-blocking, when synchronous CPU work still hogs the thread.

LIKELY FOLLOW-UPS How does the native driver bypass the JS thread, what is the role of the bridge, how does Hermes help, how do you detect JS-thread frame drops, and how does the new architecture change this.

ONE CONCRETE EXAMPLE A screen parses a 5 megabyte JSON payload synchronously in a render path. During that parse the JS thread is busy, so a button tap is queued but not handled, animations driven by JS stutter, and the FlatList cannot render new rows, so scrolling stalls until the parse finishes, even though the device's GPU and UI thread were ready the whole time.

Read the original → reactnative.dev

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.