#C’est quoi l’état

• Compose est un framework UI qui se base sur l’état des données pour déssiner l’interface (UI) correspondante.
• L’état est un ensemble de données qui peuvent être modifiées par l’utilisateur ou par le système.
• L’état est immutable, et les interfaces sont aussi immutable.
  • ☝️Cela signifie que chaque fois que l’état change, une nouvelle interface est générée.

Quand on écrit un composable, on utilise une syntaxe indempodente, via une fonction. Pourquoi une fonction = un composable ?

• Les fonctions sont indépendantes de l’état
• Une fonction est indempodente, pour une entrée donnée, elle retourne toujours la même sortie, ce qui correspond à notre idée de l’immuabilité.

#Un exemple simple

@Composable
fun MyComposable() {
  var counter = 1

  MyCountableButton(count = counter) {
    counter++
  }
}

@Composable
fun MyCountableButton(count: Int, onClick: () -> Unit) {
    Button(onClick = onClick) {
        Text("Click me ${count}")
    }
}

• Dans cet exemple, le composable MyComposable contient un état counter qui est incrémenté à chaque clic sur le bouton.
• Sauf que ce code ne fonctionne pas, car counter n’est pas un état, mais une variable locale. En effet, chaque fois que MyComposable est appelé, counter est réinitialisé à 1, puisqu’une fonction est indempodente, elle produira toujours le même résultat.

#On est donc bloqué ? 🤔

Oui, et non.

Compose met à disposition des moyens de gérer les transitions entre les états, et de les rendre persistants.

@Composable
fun MyComposable() {
  // Remember va permettre de conserver l'état entre les appels, d'où le nom
  val counter = remember { mutableStateOf(1) }

  MyCountableButton(count = counter.value) {
    counter.value++
  }
}

@Composable
fun MyCountableButton(count: Int, onClick: () -> Unit) {
    Button(onClick = onClick) {
        Text("Click me ${count}")
    }
}

#Remember et MutableState

↔️ Pour ceux qui aurait déjà fait du React les remember sont l’équivalent des useMemo en React.

• remember permet de conserver l’état entre les appels
• mutableStateOf permet de déclarer un état mutable, il va permettre de notifier Compose que l’état a changé, et de redessiner l’interface.

Il existe plusieurs rememberable :

• remember : pour conserver un état entre les modifications des variables
• rememberSaveable : pour conserver un état entre les appels, mais aussi entre les changements de configuration (rotation de l’écran)
• rememberCoroutineScope : pour conserver un scope de coroutine -> Important à retenir
• rememberSnackbarHostState : pour conserver un état de snackbar
• ... : il en existe d’autres

🧩 Remember est utile pour des opérations de modification d’une variable directes.

#Side Effect

↔️ Pour ceux qui aurait déjà fait du React les Launched Effect sont l’équivalent des useEffect en React.

Pour effectuer des opérations asynchrones ou plus complexe que des opérations directes, on utilise les SideEffect.

#Exemple simple

@Composable
fun MyComposable() {
  val counter = remember { mutableStateOf(1) }

  MyCountableButton(count = counter.value) {
    counter.value++
  }

  LaunchedEffect(counter.value) {
    delay(1000) // Simulation d'une opération asynchrone ou complexe
    counter.value++
  }
}

• Si vous deviez faire un appel réseau, ou une opération complexe, vous pouvez utiliser les LaunchedEffect de concert avec rememberCoroutineScope.

#Exemple appel réseau

fun refreshData() {
    // Appel réseau
}

@Composable
fun MyApp() {
    val scope = rememberCoroutineScope()
    var orderList by remember { mutableStateOf(emptyList<Order>()) }

    // shouldRefresh est une fonction qui permet au composable de demander un rafraichissement des données à son parent
    OrderScreen(orderList = orderList, shouldRefresh = {
        scope.launch {
            orderList = refreshData() ?: emptyList()
        }
    })

    // On lance le rafraichissement des données au démarrage d'où le 'true'
    LaunchedEffect(true) {
        scope.launch {
            orderList = refreshData() ?: emptyList()
        }
    }
}

#ViewModel

Les viewModel sont des classes qui permettent de gérer l’état de l’application, et de le partager entre les composants. C’est le niveau ultime de partage de l’état.

#Tableau de comparaison des solutions et leur utilité

#Aller plus loin

Tout est expliqué ici, dans un article très bien fait par Google : State in Jetpack Compose

#✅ Critères de Validation