With urgent rendering, React will hydrate the remaining part of the
<Suspense> boundary in a single pass – and then will call the right event handler.
Between the user’s click and the event handler’s call, the app will stay frozen. This is why wrapping the whole site with a single
<Suspense> won’t improve INP. The moment the user clicks something inside
<Suspense> boundary will switch to blocking rendering, just like in React 17.
Note: more details on event replaying. Early in the React 18 development cycle, the React team tried to introduce event replaying. If a user clicked something inside a Suspense boundary while it was being hydrated, React would remember the event. Then, once the hydration was over, it would re-dispatch the event, letting the right component handle it. However, that didn’t quite work out – as it turned out, some events can’t be replayed well.
Note: only a single
<Suspense>. To be clear, React switches to urgent rendering only within a single
<Suspense> boundary. This means it should be okay to have multiple parts of the site wrapped with
<Suspense>. If a user clicks something inside one of them, only that part will hydrate urgently.
Note: not every event triggers urgent hydration. Most common events –
keypress – do, but events like
pointerover are still replayed, like before the change.