Bug: Synchronously Restart Render on Error During Async Rendering to Prevent Inconsistencies

[farhan-labib09]

Synchronously restart when an error is thrown during async rendering

Description

In async mode, events are interleaved with rendering. If an event mutates state that is later accessed during render, it can cause inconsistencies. Restarting the render synchronously resolves the inconsistency and prevents further mutations during interleaved events.

Steps to Reproduce

1. Enable async rendering mode.
2. Trigger an event that mutates state during rendering.
3. Observe inconsistencies during the render process.

Expected Behavior

The render should restart synchronously to prevent inconsistencies and further mutations from interfering.

Actual Behavior

Inconsistent rendering occurs, leading to potential UI issues or errors.

Suggested Fix

Implement synchronous restart of the render when an error is thrown during async rendering to handle the interleaved events and ensure consistency.

[farhan-labib09]

The bug arises because, in async mode, events are interleaved with rendering. If an event mutates state accessed later in the render, it can lead to inconsistencies. Restarting the render synchronously helps fix the inconsistency and prevents further mutations during interleaved events.

[eps1lon]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://react.new), or a link to a repository on GitHub.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve