The problem ...

If you've ever seen a web page freeze or become unresponsive while performing some complex task, you've experienced the impact of blocking the main thread in JavaScript.

What Is the Main Thread?

JavaScript in the browser runs on a single main thread—the same thread responsible for executing JavaScript, handling user events (like clicks and scrolls), and rendering updates to the UI. If your JavaScript code runs for too long without stopping, it can block this thread, causing the page to become sluggish or completely unresponsive.

What Does "Yielding to the Main Thread" Mean?

To yield means to pause your code's execution temporarily, so the browser can handle higher-priority tasks—like drawing the UI or responding to user input—before resuming your work. Think of it as being polite in a conversation: instead of talking nonstop, you give others a chance to speak before continuing.

Why Is Yielding Important?

Well, let's talk why not, without yielding (if you are doing heavy JS task on the browser):

In a responsive web app, yielding regularly ensures a smooth user experience—even during complex data processing or rendering.

How to Yield in JavaScript?

Here are some practical ways to yield to the main thread:

1. Use setTimeout with Time Budgeting

Break your task into chunks and use time budgeting to yield at appropriate intervals:

2. Use requestAnimationFrame

Ideal for visual updates that should sync with the browser's paint cycle:

3. Use Promises with await

Clean way to yield in async contexts:

4. Use the newer scheduler API

The scheduler API provides more precise control over task prioritization:

---

React's Approach to Yielding

React provides several ways to handle yielding:

1. Using React's useEffect for processing in chunks:

2. Using useDeferredValue for expensive renders:

3. Using useTransition for non-blocking state updates

useTransition allows you to mark state updates as non-urgent, telling React they can be deferred if there's higher-priority work: