Scheduling in React

During this time, the main thread is blocked.With the information above, we can formulate two problems that we have to solve in order to get to more responsive user interfaces:Long-running tasks cause frame drops. I will do my best to keep this post updated.To implement a properly scheduled user interface with React, we have to look into two upcoming React features:Concurrent React (also known as Time Slicing). Then, the Scheduler will itself register a callback that is run after the next frame is drawn by the browser.3 Within this callback, the Scheduler will execute as many of the registered callbacks as possible until it’s time to render the next frame.➡️ With this feature, we can schedule tasks with different priorities.Let’s see how we can use these features to make an app feel a lot more responsive. To do this, we’re using an API exposed by the Scheduler package (which can be installed with npm i scheduler) to enqueue a lower priority callback:Inside the API we’re using, unstable_next(), all React updates will be scheduled with the Normal priority, which is lower then the default priority inside an onChange listener.Indeed, with this change, our input box already feels a lot more responsive, and frames no longer get dropped while we’re typing. Since the users of our app do not see this task, we can schedule a callback with an even lower priority for that:If we now use sendDeferredAnalyticsNotification() in our search box component and take another look at the Performance tab with this change and scroll toward the end, we’ll see that our analytics are now sent after all rendering work has completed, and so all the tasks in our app are perfectly scheduled: What an exciting time!Concurrent React and the Scheduler allow us to implement scheduling of tasks in our applications which will allow us to create highly responsive user interfaces.The official release for these features will likely happen in Q2 2019.