How to understand async transitions?

[zhaoyao91]

From this tutorial, I can get a feeling about the pattern, but by reading the code, I can't understand the logic.

• first, we see start receiving the a callback, does the callback get callled on click?
• if it was called, how can Switch/Match retain the view?
• if it was not called, how does the underlining component loading logic happen?
• how does the pending indicator know when it's pending and finished?

[ryansolid]

Yes. start executes immediately. The idea is it wraps the whole change set in a transaction of sorts. We create a new Transition if one doesn't already exist and set it as running. Once started instead of updating and propagating changes in the normal way we fork each reactive node along the change propagation path. So basically there are 2 different values for the same node.

If we hit any Resource reads under Suspense boundaries we push the promise onto this transaction. When we get to the end of the computation execution if we have not pushed any promises we overwrite the value of the original value of these nodes with the forked values, run any queued cleanups, delete the Transition, and then proceed to run any side effects.

However, if there are unresolved promises we push the Effects onto the transaction and don't execute them. Then we clear the transaction running state. As each promise resolves we resume the computation phase under the transition running and repeat until there are no promises left. Once all promises are complete. We cleanup as described previously.

The other important detail is any future changes not running under the Transition while the Transition exists that touches nodes that have been forked actually apply to both realities and runs once for each version. In so the forked reality contains both the current and future changesets so when it finally merges it is the combined single reality.

So basically no end user effects or existing render effects run on the Transition Fork until it's been remerged back into the main reality. In so while the computations can run like new forks in conditionals, new iterations in loops etc they are not inserted until the end and mount effects don't run until the very end. While we are waiting on promises to resolve we just set a signal outside of the transition for pending. That way it is visible in the main reality while our forked reality updates.

Not sure that is the best explanation but more or less how it works. I'm playing around currently scheduling the execution of the computions under the transition running and also setting that as a criteria for resolution. So as to make the off screen updates non-blocking. But it is unclear if that is super valuable, but it's to what React does.

[zhaoyao91]

Thanks for your detailed explanatation!