Deep diving on Concurrent React – Matheus Albuquerque, React Advanced London 2022

Explore the inner workings of Concurrent React's scheduling API, comparing it to browser APIs and discussing limitations, concurrent computing, and new features to optimize app performance.

Key takeaways

Concurrent React’s scheduling API is not a replacement for workers, but rather a mechanism to schedule tasks.
The browser has APIs for scheduling tasks, checking if the browser is busy handling user input, and event loops.
React uses the execution back to the main thread every 5 milliseconds, which can be a bottleneck.
There is no built-in understanding of request and response or tracking in the scheduling API, requiring custom implementation.
Web workers are great for data processing and concurrent computing, but difficult to use for UI-related tasks.
Render lanes are an abstraction built around bit masks, allowing for parallelism and concurrency.
Cooperative multitasking model uses a single interruptible rendering thread.
APIs for scheduling tasks, such as the “priority task scheduling” umbrella, are available.
The browser has a scheduling tab to monitor and optimize rendering.
Concurrent React’s scheduling API is designed for library maintainers and has hooks like useHistorySelector and useSyncExternalStore.
The useCallback and useMemo hooks are not sufficient for tackling wasted renders, and a new profiler is available to monitor app performance.
The React core team is working on Server Components, which will be a major topic of discussion.
Actors are an abstraction where each actor fully owns the data it operates on, simplifying concurrency and parallelism.
The browser has a cooperative multitasking model for rendering, and the main thread is the actor that owns the DOM and UI.
The useHistorySelector hook helps to avoid re-renders and improve performance.
The useSyncExternalStore hook helps to synchronize state between components.
The useCallback and useMemo hooks are insufficient for tackling wasted renders, and a new profiler is available to monitor app performance.

Deep diving on Concurrent React – Matheus Albuquerque, React Advanced London 2022

More talks