Introducing the React Scheduling Profiler: New Performance Analysis Features for React 18

Recently the React team released an open‑source performance analysis tool called Scheduling Profiler , which goes beyond the classic Profiler by showing what the React Scheduler is doing, including when state updates are scheduled and how they are prioritized.

How transitions work

The new startTransition API introduced in React 18 lets developers mark state updates as non‑urgent; such updates can be interrupted by more urgent work (e.g., a new user input) and will resume only after all high‑priority tasks are finished.

How Suspense affects rendering performance

React 18 will eventually provide full data‑fetching support via Suspense , but it can already be used to defer loading of components. The profiler now displays the time a component spends in a suspended state and how that impacts overall render performance.

What else can cause rendering delays?

Delays may stem from Suspense waiting for data, heavy JavaScript execution, or any non‑React JavaScript that blocks the main thread; the new profiler highlights both React‑specific and generic JavaScript work that contributes to latency.

Performance tips

The updated tool not only visualizes work but also offers optimization suggestions, such as warnings when long‑running synchronous React updates are scheduled inside event handlers.

Installation

Install the latest version (4.15) of React DevTools to access all of these features. Remember to test your site built with React 18, as most of the new capabilities target React 18’s features.