What a Composable Function Is

A composable is a Kotlin function marked @Composable that returns Unit: calling it emits UI, as a React 7,897 component returns elements. It is named like a class, takes its data as parameters, and accepts a Modifier (Layouts and Modifiers) as its first optional parameter.

ui/BookCard.kt: BookNest's first composable (imports omitted)Kotlin

@Composable
fun BookCard(book: Book, modifier: Modifier = Modifier) {
  Card(modifier.fillMaxWidth()) {
    Column(Modifier.padding(16.dp)) {
      Text(book.title, style = MaterialTheme.typography.titleMedium)
      Text("${book.author} · ${book.genre}", style = MaterialTheme.typography.bodyMedium)
      Text(
        "$%.2f · ★ %.1f".format(book.price, book.rating),
        style = MaterialTheme.typography.labelLarge,
        color = MaterialTheme.colorScheme.primary,
      )
      if (!book.inStock) {
        Text("Out of stock", color = MaterialTheme.colorScheme.error)
      }
    }
  }
}

Against React Native's BookCard (Typing Props and Params), props become parameters with defaults, JSX nesting becomes trailing lambdas (Lambdas) and a conditional element a plain if. Like hooks, composables can be called only from composables: BookCard(book) in onCreate fails to compile, inside setContent { } it works. The Compose 234 compiler plugin rewrites every composable, as javap shows:

Inspecting the compiled BookCardShell

cd app/build/intermediates/built_in_kotlinc/debug/compileDebugKotlin/classes
javap -p com.example.booknest.ui.BookCardKt | grep ' BookCard(' \
  | sed -E 's/([a-z]+\.)+([A-Z])/\2/g'
javap -c -p com.example.booknest.ui.BookCardKt | grep -oE 'Composer\.[a-zA-Z]+' | head -7 \
  | sed 's/Composer.//' | paste -sd' '

Output

  public static final void BookCard(Book, Modifier, Composer, int, int);
startRestartGroup changed changedInstance changed shouldExecute skipToGroupEnd endRestartGroup

BookCard gained a Composer and two bitmasks, $changed and $default. The body opens a restart group, compares book and modifier with the stored values, and if neither changed skips the whole card. Since Compose may skip, reorder or rerun any composable, keep it fast, idempotent and free of side effects (no network calls, shared writes or Random); Compose Side Effects shows where such work goes.

MENU

What a Composable Function Is