flushSync implementation needed for new View Transitions API

[sschultze]

Describe the feature you'd love to see

The documentation of the View Transitions API available in Chrome 111+ has a section Working with frameworks which mentions React's flushSync function as a key to use it together with the View Transitions API.

Because when using startViewTransition, you have to ensure that the DOM is completely updated, which is what flushSync does.

Preact's implementation of flushSync however is currently just a no-op.

So my suggestion is to implement flushSync so that it ensures that the DOM is updated completely like described here.

[sschultze]

BTW, the comment of the no-op "implementation" in Preact says that

In React, flushSync flushes the entire tree and forces a rerender.

The latter one doesn't seem to be true, at least it is not documented in the latest reference that flushSync forces a rerender, and from my point of view it wouldn't make sense to rerender everything to achieve the function's intended effect.

The React documentation however says:

flushSync lets you force React to flush any updates inside the provided callback synchronously. This ensures that the DOM is updated immediately.

This makes a lot of sense in certain scenarios, like in the case described above (View Transitions API).

[sschultze]

As commented in #3928, the flush of the queue actually doesn't have to be synchronous. The callback passed to startViewTransition can return a promise, as described here.

But I think that there's a chance that 3rd party libraries will use React's flushSync with the View Transition API, so it's probably better to implement this rather than introducing another async function.

[foxt]

@sschultze yeah, just tried to implement view transitions, and the problem is that, returning from the callback is only half the battle -- you seemingly need to block rendering until that callback is called. for example, if you try and start a view transition in, for example, componentWillUpdate, and end it in componentDidUpdate, as componentWillUpdate will fire before the view transition before snapshot has been created and the callback has been called.

[sschultze]

@foxt You should do anything that will cause a render, like setState, in the async method passed to startViewTransition. If the render happens because of changed props, call startViewTransition in the anchestor that causes the props to change.

[laurentpayot]

Note that current React Canary version has a ViewTransition component.

[JoviDeCroock]

This has been implemented and is coming to v10