State hoisting pattern in Android Kotlin - UI Render Trace

Component - State hoisting pattern

This UI component demonstrates the state hoisting pattern in Android Kotlin using Jetpack Compose. State hoisting means moving the state up to a parent component so that it can control and share the state, while the child component only displays UI and triggers events.

Widget Tree

ParentComposable
├── ChildComposable
│   └── TextField
└── Text

The ParentComposable holds the state and passes it down to ChildComposable as parameters. ChildComposable shows a TextField for user input and calls back to ParentComposable on changes. ParentComposable also displays the current text below.

Render Trace - 4 Steps

Step 1: ParentComposable

Step 2: ChildComposable

Step 3: TextField

Step 4: ParentComposable

State Change - Re-render

Trigger:User types text in the TextField inside ChildComposable

Before

text = "" (empty)

→

After

text = "user typed text" (updated string)

Re-renders:ParentComposable and its children (ChildComposable and Text) recompose to reflect new state

UI Quiz - 3 Questions

Where is the state variable 'text' stored in the state hoisting pattern?

A Inside the TextField widget

B In the ParentComposable

C In the ChildComposable only

D In a global variable

Key Insight

State hoisting helps keep UI components simple and reusable by moving state management to a common parent. This makes the app easier to test and maintain, and allows multiple components to share and react to the same state.