Make your code readable with Higher Order Components in Jetpack Compose

Photo by Aaron Burden on Unsplash

In this article we will talk about Higher Order Components in Jetpack Compose, with the help of this we can make our compose code more readable.

Till now we only heard about higher order function → a function that takes functions as a parameter or returns function is called higher order function .

Here Components is your Composable functions .

It means in case of higher order component , instead of normal function we will pass composable functions .

A function that takes composable function as a parameter or returns composable functions is called Higher order component .

Lots of theory let’s understand by an Example

This is the scoreboard UI , Let’s see how we will make this UI in Jetpack Compose with the help of Higher Order Components .

→ Our first step is to break the UI in the sub components.

@Composable
private fun ScoreboardRow(
    modifier: Modifier = Modifier,
    search: (@Composable () -> Unit)? =…