Gérer efficacement les effets de bord dans Jetpack Compose est crucial pour la performance.
Les recalculs inutiles lors des recompositions peuvent ralentir votre application.
L’article explore l’utilisation de derivedStateOf pour optimiser ces calculs et améliorer la réactivité.
Créez des interfaces modernes et réactives avec JetPack Compose!
Introduction à derivedStateOf
Fonctionnement de l'état dérivé
Dans Jetpack Compose, la gestion efficace des effets de bord est cruciale pour assurer une performance optimale de l’application. Parmi les outils disponibles pour cette gestion, derivedStateOf se distingue en permettant la création d’un état dérivé à partir d’autres états. Ce mécanisme est particulièrement utile pour optimiser les calculs et éviter les recalculs inutiles à chaque recomposition d’un composable.
derivedStateOf est une fonction dans Jetpack Compose qui permet de créer un état dérivé basé sur un ou plusieurs états sources. L’objectif principal de cette fonction est de réduire le nombre de calculs effectués lors des recompositions des composables en ne recalculant un état dérivé que lorsque les états sources changent.
Avantages pour l'optimisation en Compose
La fonction derivedStateOf crée un nouvel état qui est calculé uniquement lorsque les états dont il dépend changent. Contrairement aux effets de bord comme LaunchedEffect ou SideEffect, qui peuvent être recalculés à chaque recomposition, derivedStateOf s’assure que les calculs sont effectués de manière plus ciblée et efficace.
Syntaxe de derivedStateOf :
@Composable
fun MyComposable(
highPriorityKeywords: List<String>,
word: String
) {
// Déclaration d'un état dérivé
val filteredTasks by derivedStateOf {
// Calcul coûteux basé sur les états sources
filterTasks(highPriorityKeywords, word)
}
// Utilisation de l'état dérivé
Text("Filtered Tasks: $filteredTasks")
}
fun filterTasks(keywords: List<String>, word: String): List<String> {
// Exemple de calcul coûteux
return keywords.filter { it.contains(word, ignoreCase = true) }
}
Résultat après traitement par le code :
Élément | Description |
|---|---|
Déclaration de filteredTasks | Utilise derivedStateOf pour créer un état dérivé qui dépend des highPriorityKeywords et word. |
Calcul Coûteux | filterTasks est appelé pour filtrer les mots-clés basés sur la présence de word. |
Utilisation de l’État Dérivé | filteredTasks est utilisé pour afficher les tâches filtrées dans un Text. |
Fonction filterTasks | Filtre les mots-clés en fonction de word, en effectuant un calcul coûteux basé sur les paramètres. |
Liste de Mots-Clés | highPriorityKeywords est une liste de mots-clés fournie à MyComposable. |
Filtrage de Tâches avec derivedStateOf
Performance Optimisée : Évite les recalculs inutiles en ne recalculant l’état dérivé que lorsque les états sources changent. Cela réduit la charge de travail lors des recompositions.
Gestion Efficace des Calculs : Permet d’effectuer des calculs complexes ou coûteux de manière efficace, sans les répéter à chaque recomposition.
Réactivité Améliorée : Assure que les calculs dérivés sont toujours à jour par rapport aux états sources tout en minimisant les coûts de calcul.
Conclusion sur l'efficacité de Compose
Imaginons une situation où vous devez filtrer une liste de tâches en fonction de mots-clés de haute priorité et d’un mot spécifique saisi par l’utilisateur. Utiliser derivedStateOf permet de ne recalculer le filtrage que lorsque les mots-clés ou le mot changent
Exemple de Code :
@Composable
fun TaskListScreen(
highPriorityKeywords: List<String>,
searchWord: String
) {
// État dérivé pour les tâches filtrées
val filteredTasks by derivedStateOf {
filterTasks(highPriorityKeywords, searchWord) }
Column(modifier = Modifier.padding(16.dp)) {
Text("Tasks with keyword: $searchWord")
Spacer(modifier = Modifier.height(8.dp))
filteredTasks.forEach { task ->
Text(task) } }}
fun filterTasks(keywords: List<String>, word: String): List<String> {
// Exemple de filtrage des tâches
return keywords.filter { it.contains(word, ignoreCase = true) }
}
Résultat après traitement par le code :
Élément | Description |
|---|---|
État Dérivé | Utilisation de derivedStateOf pour créer filteredTasks, un état dérivé basé sur highPriorityKeywords et searchWord. |
Affichage de la Liste | Utilisation d’un Column pour afficher les tâches filtrées après un Spacer pour l’espacement. |
Fonction filterTasks | Filtre les mots-clés en fonction de searchWord, en renvoyant une liste de tâches correspondantes. |
Liste de Tâches | filteredTasks est utilisé pour afficher les tâches filtrées en itérant sur chaque élément avec forEach. |
Conclusion
derivedStateOf est un outil puissant dans Jetpack Compose pour optimiser les calculs basés sur des états sources. En permettant de créer des états dérivés qui ne se recalculent que lorsque les états sources changent, cette fonction améliore les performances et la réactivité des composables.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Qu'est-ce que derivedStateOf dans Jetpack Compose ?
Comment fonctionne la fonction derivedStateOf ?
Quels sont les avantages de derivedStateOf ?
Comment utiliser derivedStateOf pour filtrer des tâches ?
Pourquoi choisir derivedStateOf pour gérer des états dans Jetpack Compose ?
Conclusion
En somme, derivedStateOf est un outil puissant pour optimiser les calculs dans Jetpack Compose. En améliorant les performances et la réactivité des composables, il devient essentiel pour développer des applications efficaces. Comment envisagez-vous d’intégrer ce principe dans votre prochain projet ?
