Performance

Blog Posts

Improving App Performance with Baseline Profiles

Improving App Startup: Lessons from the Facebook App

---

Resources Jetpack Compose performance

---

Follow best practices

READ THIS -> Compose best practices <- READ THIS

Use remember to minimize expensive calculations

Example:

@Composable
fun ContactList(
    contacts: List<Contact>,
    comparator: Comparator<Contact>,
    modifier: Modifier = Modifier
) {
    // DON’T DO THIS
    LazyColumn(modifier) {
        // This get run every time the composable is recomposed
        items(contacts.sortedWith(comparator)) { contact ->
            // ...
        }
    }


    // DO THIS
    // This only gets run when contacts or comparator changes
    // Similar to React useMemo hook
     val sortedContacts = remember(contacts, comparator) {
        contacts.sortedWith(comparator)
    }

    LazyColumn(modifier) {
        items(sortedContacts) {
            // ...
        }
    }
}

Use lazy layout keys

Example:

@Composable
fun NotesList(notes: List<Note>) {
    // This works and is fine for smaller lists / lists that don't change often
    // But if the list is large or changes often, this is will result in the entire list being recomposed
    LazyColumn {
        items(
            items = notes
        ) { note ->
            NoteRow(note)
        }
    }

    // This is even better
    // Similar to React Native FlatList keyExtractor prop
    // We are telling Compose how to uniquely identify each item
    LazyColumn {
        items(
            items = notes,
            key = { note ->
                // Return a stable, unique key for the note
                note.id
            }
        ) { note ->
            NoteRow(note)
        }
    }
}