Home

What is UiState3

When you write code in compose, you can bind the renderable State to the Composable function in the following manner.

setContent {
    ComposeRootRendererFunction(ComposedStateRoot())
}

Most of the time your App state will be composed of other state that it contains within itself. We can model it like bellow, lets assume we have a nested renderable state with 3 levels.

class ComposedStateRoot {
    val composeStateLevel2 = ComposedStateLevel2()
}

class ComposedStateLevel2 {
    val composeStateLevel3 = ComposedStateLevel3()
}

class ComposedStateLevel3

Typically to render that App state we will do something like:

@Composable
fun ComposeRootRendererFunction(stateRoot: ComposedStateRoot) {
    ...
    ComposeLevel2RendererFunction(stateRoot.composeStateLevel2)
    ...
}

@Composable
fun ComposeLevel2RendererFunction(stateLevel2: ComposedStateLevel2) {
    ...
    ComposeLevel3RendererFunction(stateLevel2.composeStateLevel3)
    ...
}

@Composable
fun ComposeLevel3RendererFunction(stateLevel3: ComposedStateLevel3) {
    // do something with stateLevel3
}

and use it like

class MainActivity : ComponentActivity() {

    // MainActivity host the state
    val composedStateRoot = ComposedStateRoot()
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // MainActivity hooks the state in to the Composable renderer function
        setContent {
            ComposeRootRendererFunction(composedStateRoot)
        }
    }
}

The Activity in this case is playing the role of the glue class that binds the 2 elements, the function and the state it process. The same role the Activity is playing in this example is the same role a Node does in UiState3. A node is basically a class that host a state for a composable function to be rendered at some point.

class SomeNode : Node {
    val context: NodeContext = NodeContext()
    
    val someNodeState: SomeNodeState()
    
    //...

    @Composable
    abstract fun Content(modifier: Modifier) {
        SomeNodeComposable(someNodeState)
    }

    //...
}

@Composable
fun SomeNodeComposable(someNodeState: SomeNodeState) {}

data class SomeNodeState

That is all it is, a glue class for 2 things, a Composable function and the state it renders!