Making our countdown component aware of the lifecycle of composables
The main issue is that our CustomCountdown component still runs its countdown even after the CountdownItem() composable leaves composition. We want to pause the timer when its corresponding composable is not visible anymore. With such an approach, we can prevent users from cheating, and we can award the prize only to users that have had the countdown timer visible for the full amount of time. Basically, if the timer is not visible anymore, the countdown should stop.
To pause the timer when its corresponding composable function leaves composition, we must somehow call the stop() function exposed by CustomCountdown. But when should we do that?
If you look inside the body of the CountdownItem() composable, you will notice that we have already registered a DisposableEffect() composable that notifies us when the CountdownItem() composable leaves composition by exposing the onDispose() callback:
@Composable private...