Is it possible to wait for effects down a composable hierarc

Question

Is it possible to wait for effects down a composable hierarchy to run before rendering the UI I e ComposableA enters the composition runs some effects calls a child composable which also runs effects I would like to prevent rendering any UI down this hierarchy until both effects have run is this possible In React I think this would be achievable with <https reactjs org docs hooks reference html uselayouteffect|useLayoutEffect>

Adam Powell · Answer

Can you describe your use case

Jason Ankers · Answer

Trying to determine if it s possible to implement a navigation builder syntax similar to <https reactnavigation org docs auth flow |react navigation> where you can compose screens declaratively by nesting routes ```Route lt ScreenA gt SomeSharedUI Route lt ScreenB gt ScreenB Route lt ScreenC gt ScreenC ``` This means the Route lt T gt builder will need to run in a composable context I want the start destination to be the first route positionally which would be ScreenB To achieve this Route lt T gt runs an effect to push its first child route onto the backstack which will render in the next composition The problem is this effect will run after SomeSharedUI has rendered causing a cascade of UI appearing I want the entire route hierarchy to render in a single frame

Adam Powell · Answer

A formula I ve used quite a bit for builders is ``` Composable fun Thing builder FooBuilder gt Unit val currentBuilder by rememberUpdatedState builder val foo by remember derivedStateOf FooBuilder apply builder build ```

Adam Powell · Answer

it works for navigation route builders LazyColumn adapters etc

Adam Powell · Answer

it ensures the built structure is always up to date and available during composition but it does strictly separate ` Composable` content from building the object You would need to wrap your `SomeSharedUI ` call in something like ```Route lt ScreenA gt Shared SomeSharedUI ```

Jason Ankers · Answer

Yeah I ve been using something pretty similar to that to keep the structure up to date My goal was specifically to see if it s possible to mix the Composable content with the builder unfortunately since it makes for a pretty convenient routing syntax

Adam Powell · Answer

yeah as you ve found though it makes for some very circuitous data dependencies depending on what you let the caller express

Adam Powell · Answer

composition really wants strict inputs and outputs

Adam Powell · Answer

and effects are firmly outputs

Adam Powell · Answer

you can do a little bit with things like SubcomposeLayout for things that are strictly children but that comes with an overhead and warped expectations created for callers that really aren t worth the syntactic sugar you re gaining over a single wrapper for the shared content like the above

Adam Powell · Answer

if you treat this as a little more of a nested navigation style you could probably do something like ```RouteSharedContent lt ScreenA gt SomeSharedUI Routes Route lt ScreenB gt ScreenB Route lt ScreenC gt ScreenC ```

Adam Powell · Answer

you kind of have to pick what part you want to have the wrappers though to keep your route declarations and the content of those routes separate

Adam Powell · Answer

hmm I suppose you could collapse those treat ```Route lt ScreenB gt ScreenB ``` the same as ```Routes Route lt ScreenB gt ScreenB ``` and probably still make it work in a single pass

Adam Powell · Answer

but this is also still a lot of infrastructure to avoid writing a content wrapper as a helper for the shared content and just using it in a few different routes

Adam Powell · Answer

``` Composable fun MyContentScaffold content Composable gt Unit stuff content in your routing definitions Route lt ScreenB gt MyContentScaffold ScreenB Route lt ScreenC gt MyContentScaffold ScreenC ```

Adam Powell · Answer

depending on how much shared state you want to keep around in the scaffold as you navigate But even then `movableContentOf ` is going to give you some more options there too

Adam Powell · Answer

not to mention standard state hoisting and just pulling your custom scaffold state out of the routing composable to share it manually

Jason Ankers · Answer

Yeah I was about to mention the use case for sharing state across destinations but I ve never heard of movableContentOf

Adam Powell · Answer

it s not merged yet but should show up in some upcoming compose runtime 1 2 alphas soon

Adam Powell · Answer

it s the new name of the composition as a value feature that has been discussed in this channel here and there

Adam Powell · Answer

roughly speaking it d let you do ```val sharedContent = remember movableContentOf SomeSharedUI RoutingTable Route sharedContent ScreenA Route sharedContent ScreenB ``` and that instance of `SomeSharedUI ` would retain all of its remembered composition state as it moves between destinations

Adam Powell · Answer

with some limitations if you re displaying both destinations concurrently during transition animations this is why it can still be useful to represent this sort of thing as nested navigational structure for shared chrome elements

Jason Ankers · Answer

That does sound great look forward to seeing it It still feels a bit odd defining the shared content outside the routing table making it accessible to all routes My original thought was by using composition as the routing table you d simply be able to declare it in the scoped region of the navigation table where you need it only accessible to the routes which it should be shared amongst

Adam Powell · Answer

I d probably do this with some sort of nested navigation arrangement for that reason

Adam Powell · Answer

treat the outer and inner parts as separate routing tables so to speak

Jason Ankers · Answer

Yep in my implementation a Route lt T gt is just a nested route table my only problem is I couldn t get it happening in a single pass I think it s only a problem for the initial display when we need to choose a starting route

Jason Ankers · Answer

A throwaway remember inside Route lt T gt solves it as a workaround instead of effects how much trouble will this get me in ```remember backStackIsEmpty if backStackIsEmpty backStack push route null ```

lhwdev · Answer

Note that it is merged <https android googlesource com platform frameworks support + refs heads androidx main compose runtime design movable content md|https android googlesource com platform frameworks support + refs heads androidx main compose runtime design movable content md> for documentation