Is it right that TabRow recomposes all tabs each time you make a selection?

# compose

[jonathan olds]

Is it right that TabRow recomposes all tabs each time you make a selection?

[jonathan olds]

For instance:

@Composable
fun TabRow2(
) {

	var selectedTab by remember { mutableStateOf(0)}

	TabRow(
		selectedTabIndex = selectedTab,
		indicator = { tabPositions ->
			if (selectedTab < tabPositions.size) {
				TabRowDefaults.SecondaryIndicator(
					Modifier.tabIndicatorOffset(tabPositions[selectedTab])
				)
			}
		},
	) {

		for (i in 0 until 4) {
			println("new tab $i")
			Tab(
				selected = selectedTab == i,
				onClick = { selectedTab = i },
				text = { Text(i.toString()) }
			)
		}

	}

}

I would have expected that to only recompose the indicator or maybe the two tabs affected by the change, no?

[Peter Mandeljc]

Any time you use for loop, you should consider using key()

for (i in 0 until 4) {
    val isSelected = i == selectedTab
    key(i, isSelected) {
        Tab(selected = isSelected, ...)
    }
}

[jonathan olds]

good point, but it still recomposes the whole thing.

[jonathan olds]

is it because the function takes an int instead of a lambda?

[Peter Mandeljc]

I made a typo. I updated the code above, try again :)

[Peter Mandeljc]

Any time arguments for composable change, it's subject to recompose

[jonathan olds]

It still rebuilds all tabs, regardless of key.

[jonathan olds]

here's the test I used now:

@Composable
fun TabRow2() {

	var selectedTab by remember { mutableStateOf(0)}

	TabRow(
		selectedTabIndex = selectedTab,
		indicator = { tabPositions ->
			if (selectedTab < tabPositions.size) {
				TabRowDefaults.SecondaryIndicator(
					Modifier.tabIndicatorOffset(tabPositions[selectedTab])
				)
			}
		},
	) {

		for (i in 0 until 4) {
			val isSelected = i == selectedTab
			key(i, isSelected) {
				println("new tab $i")
				Tab(
					selected = selectedTab == i,
					onClick = { selectedTab = i },
					text = { Text(i.toString()) }
				)
			}

		}

	}

}

[jonathan olds]

Here's TabRow's signature:

@Composable
@ComposableInferredTarget
public fun TabRow(
    selectedTabIndex: Int,
    modifier: Modifier,
    containerColor: Color,
    contentColor: Color,
    indicator: @Composable (List<TabPosition>) -> Unit,
    divider: @Composable () -> Unit,
    tabs: @Composable () -> Unit
): Unit

[jonathan olds]

to me it seems like it shouldn't accept selectedTab as an Int if that causes every tab to rebuild on change.

[jonathan olds]

but it also uses subcomposelayout, and I don't see why that's needed, so maybe there is extra magic to it that I don't understand