title: Jetpack Compose and Dependency Inversion
body: <p>In Jetpack Compose, most examples look something like this:</p>
  <pre><code>ScreenLevelContainer {
    TopBar { ... }
    ContentA { ... }
    ContentB { ... }
    // etc.
  }
  </code></pre>
  <p>Contents of any given composable may be comprised of other deeply nested composables.</p>
  <p>They talk about &quot;state hoisting&quot; such that application state should be stored at the high levels in the UI, or outside the UI entirely.</p>
  <p>There seems to be a maintenance problem here though. Any state that <code>TopBar</code>, its children, or the other content relies on needs to be passed through <code>ScreenLevelContainer</code>, even though <code>ScreenLevelContainer</code> has no explicit interest in the inner workings of <code>TopBar</code>.</p>
  <p>Moreover, if any of these children ever need to update the state that they take, one needs to go update any parents that include them, possibly in <em>lots</em> of places in a sufficiently complex application.</p>
  <p>Pre-Compose, I would have used dependency inversion (and probably dependency injection) to solve this:</p>
  <pre><code>val topBar = TopBar(/* TopBar specific arguments */)
  val contentA = ContentA(/* ContentA specific arguments */)
  val contentB = ContentB(/* ContentB specific arguments */)
  ScreenLevelContainer(topBar, contentA, contentB)
  </code></pre>
  <p>In the above code, any changes to <code>TopBar</code> or the other content can happen independently of <code>ScreenLevelContainer</code>. This becomes especially valuable when nested UI becomes complex. (Imagine <code>TopBar</code> having an interactive shopping cart in it.)</p>
  <p>What is the correct approach here?</p>