How to avoid recomposition of every LazyList item when using Room and updating single item?

Question

I am using Jetpack Compose and Room as database solution. Have a room table with Tasks and retrieve all tasks using a flow to display them in a lazy list, like so:

@Entity(tableName="task")
data class Task(
  @PrimaryKey(autoGenerate = true) val id: Int = 0,
  val text: String,
  val done: Boolean,
)

@Dao
interface TaskDao {
  // ...other methods
  @Query("SELECT * FROM task") fun getAllTasks(): Flow<List<Task>>
  @Query("UPDATE todo SET done = :done WHERE id = :id")
  suspend fun setDone(id: Int, done: Boolean)
}

class TaskRepository(private val taskDao: TaskDao) {
  // ...other methods
  fun getAllTasks() = taskDao.getAllTasks()
  suspend fun setDone(id: Int, done: Boolean) = taskDao.setDone(id, done)
}

I provide the list of tasks via my ViewModel:

class MainScreenViewModel(
  private val taskRepository: DatabaseTaskRepository,
) : ViewModel() {
  val taskList: StateFlow<List<Task>> =
    taskRepository
      .getAllTasks()
      .stateIn(
        scope = viewModelScope,
        started = SharingStarted.WhileSubscribed(5_000),
        initialValue = emptyList()
      )

  fun setDone(taskId: Int, done: Boolean) {
    viewModelScope.launch { taskRepository.setDone(taskId, done) }
  }

In my MainScreen I now display a list of the tasks:

@Composable
fun MainScreen(viewModel: MainScreenViewModel) {
  val tasks by viewModel.taskList.collectAsState()
  TaskList(
      tasks = tasks,
      onDoneChanged = viewModel::setDone,
  )
}

@Composable
fun TaskList(
  tasks: List<Task>,
  onDoneChanged: (id: Int, done: Boolean) -> Unit,
) {
  LazyColumn {
    items(items = tasks, key = { it.id }) {
      TaskListItem(
        text = it.text,
        done = it.done,
        onDoneChanged = { done -> onDoneChanged(it.id, done) },
      )
    }
  }
}

@Composable
fun TaskListItem(
  text: String,
  done: Boolean,
  onDoneChanged: (Boolean) -> Unit,
) {
  Row(/* ... */) {
    Checkbox(checked = done, onCheckedChange = onDoneChanged)
    Text(text)
  }
}

This works, but every time I check a task, all items get recomposed. I suppose this is because the taskList flow emits a new List and compose doesn't know that actually only one item changed. But how can I make this clear to compose and achieve that only the checkbox gets recomposed? I thought providing LazyColumn with a key function would solve the issue as this is implied in the compose best practices, but it didn't. I'm sure there must be a way? I know using a SnapshotStateList works from this post, but as I need to get (and update) the data from the DB I guess this isn't an option?

Answer 1

the issue is not in the database nor the composable, the issue is in the viewmodel there is nothing wrong but it's just not managed well, to avoid the recompositin when an item chech changes update your viewModel:

viewmodel

class MainScreenViewModel(
    private val taskRepository: TaskRepository,
) : ViewModel() {
    private val _taskList = MutableStateFlow<List<Task>>(emptyList())
    val taskList: StateFlow<List<Task>> get() = _taskList

    init {
        viewModelScope.launch {
            taskRepository.getAllTasks().collect { tasks ->
                _taskList.value = tasks
            }
        }
    }

    fun setDone(taskId: Int, done: Boolean) {
        viewModelScope.launch {
            taskRepository.setDone(taskId, done)
            val updatedTaskList = _taskList.value.map { task ->
                if (task.id == taskId) {
                    task.copy(done = done)
                } else {
                    task
                }
            }
            _taskList.value = updatedTaskList
        }
    }
}

Task composable

also add rememberUpdatedState in task composable:

@Composable
fun Task(
    text: String,
    done: Boolean,
    onDoneChanged: (Boolean) -> Unit,
) {
    val updatedOnDoneChanged by rememberUpdatedState(onDoneChanged)

    Row(/* ... */) {
        Checkbox(checked = done, onCheckedChange = updatedOnDoneChanged)
        Text(text)
    }
}

here i found this on the official Android Developer documentation rememberupdatestateOfficialdoc

TIP

side tip : don't use viewmodel.taskList.collectAsState() use collectAsStateWithLifecycle() that collect flow in a manner way here is a further explanation -> collectAsStateWithLifeCycle