🐞 Rebugger

Being a “compose dev” our enemy number one is unnecessary recompositions 🤕. Often times we use tools like recompositionHighligher, LogComposition, and layout inspector to count the recomposition, but there’s no direct way to understand “why” the recomposition has happened.

Rebugger is a simple compose utility function that can track the change in the given arguments. It’ll print the reason for recomposition in your Logcat window.

⌨️ Demo

Usage

1. Add dependencies

repositories {
  maven { url 'https://jitpack.io' } // Add jitpack
}

dependencies {
  implementation 'com.github.theapache64:rebugger:<latest.version>'
}

2. Add Rebugger call

Call Rebugger with the states or args you want to track

@Composable
fun VehicleUi(
    car: Car,
    bike: Bike,
) {
    var human by remember { mutableStateOf(Human("John")) }

    // Call Rebugger and pass the states you want to track. 
    // It could be a function arg or a state
    Rebugger(
        trackMap = mapOf(
            "car" to car,
            "bike" to bike,
            "human" to human
        ),
    )
    
    //...

3. See LogCat

Search for Rebugger

🖥 Sample Outputs

• When Rebugger hooked into your composable, it’ll print something like this

• When VehicleUi recomposes due to car instance change

• When VehicleUi recomposes due to both car and bike instance change

• When VehicleUi recomposes due to human instance change (State within the composable)

🟠 Limitation

Auto Name Picking

When Rebugger is placed deep inside the composable, it may not be able to pick the correct composable name. For example, if I place the Rebugger somewhere inside the Button lambda like this

@Composable
fun VehicleUi(
  car: Car,
  bike: Bike,
) {
// ...

    Column {
        // ...

        Button(
            onClick = {
                //...
            }
        ) {

            // 🟠 Inside Button's content lambda
            Rebugger(
                trackMap = mapOf(
                    "car" to car,
                    "bike" to bike,
                    "human" to human
                ),
            )
            
            // ...
        }
    }
}

It’ll print something like this

Fix

To fix this, you can pass composableName argument to override the automatic name picking behaviour

Rebugger(
    composableName = "Button's body",
    trackMap = mapOf(
        "car" to car,
        "bike" to bike,
        "human" to human
    ),
)

🌇 TODO

• IDE plugin : To generate Rebugger call (vote here)

GitHub

View Github