I feel I’m not into JavaScript virtual machines anymore, I’ve been reading about and using them for more than 10 years and I think I need something else to learn about, anyway, one of the last things I’ve been learning about is the React’s internal scheduler.
As someone who’s spent years diving into how V8’s scheduler and Node.js’s worker pools work, and even talked about them in different events, I find the scheduler in React really worth a look.
React’s internal scheduler source code for your joy and happiness: https://github.com/facebook/react/blob/main/packages/scheduler/src/forks/Scheduler.js
Task prioritization: React’s secret sauce
This thing is like a finely tuned engine, sorting tasks from ImmediatePriority, UserBlockingPriority, NormalPriority, LowPriority and IdlePriority. The important point here is that some things just have to be done now, while others can wait. React’s got this figured out to keep your UI smooth and responsive.
React uses two main queues: the taskQueue for the now-stuff and the timerQueue for the later-stuff. It’s a smart way to manage what needs to happen immediately and what can be put on the back burner. This reminds me a lot of how Node handles tasks in its worker pool – efficient and clever.
To schedule tasks, React uses unstable_scheduleCallback for lining up tasks, considering their priority and timing. It’s all about balancing what needs to happen and when. This kind of strategic scheduling is super important, kind of like how V8 manages its tasks.
The work loop: React’s heartbeat
Now, let’s talk about the workLoop function. This function is where the magic happens. It processes tasks, knows when to take a break (yield to the browser), and keeps things running smoothly. This reminds me a lot of Node’s event loop – doing a lot but never stopping. Surprisingly, it uses a while statement to handle the loop.
React’s scheduler decides when to give the browser a moment, based on how things are running. This smart use of time is something I’ve always admired in JavaScript environments, and React nails it.
Here’s something cool for the tech nerds (like me!): React’s scheduler comes packed with tools for profiling and debugging. It’s crucial to have these in your toolkit when you’re dealing with a complex system.
The scheduler is open to integration with some neat APIs, giving us devs a peek under the hood and a way to work with it directly. It’s kind of like Node’s approach of its native API.
React’s scheduler, like V8 and Node, shows the awesome talent of the JavaScript ecosystem. It’s a reminder of how much I can’t learn because is just impossible to keep up.
See you at the GM Island.
🏝️