Material for this slide includes: 1. Description of effect handlers and their types 2. Description of side effects and their examples 3. Description of animations and their APIs in Jetpack Compose

2. 2

3. Effect Handlers
In the future, compositions could be potentially offloaded
to different threads, executed in parallel, in different order,
or similar things. That’s a door for diverse potential
optimizations the Compose team wants to keep open, and
that is also why you’d never want to run your side effects
right away during the composition without any sort of
control.
3

4. Effect Handlers (cont.)
4
As mechanisms theoretical, effect handlers is:
• Effects run on the correct composable lifecycle
step. Not too early, not too late. Just when the
composable is ready for it.
• Suspended effects run on a conveniently
configured runtime (Coroutine and convenient
CoroutineContext).

5. Effect Handlers (cont.)
5
As mechanisms theoretical, effect handlers is:
• Effects that capture references have their
chance to dispose those when leaving
composition.
• Ongoing suspended effects are cancelled when
leaving composition.

6. Effect Handlers Types
6
We could divide effect handlers in two categories:
• Non suspended effects, E.g: Run a side effect to initialize a
callback when the Composable enters the composition, dispose it
when it leaves.
• Suspended effects, E.g: Load data from network to feed some UI
state.

7. What is a side effect?
One of the non suspended effects on jetpack compose is
Side Effect. A side effect is essentially anything that
escapes the scope of the function. Here is an example of
what could be a side effect to keep an external state
updated.
7

8. What is a side effect? (cont.)
8
That composable describes a screen with a drawer with touch handling
support. The drawer state is initialized as Closed, but might change to
Open over time. For every composition and recomposition, the
composable notifies the TouchHandler about the current drawer state
to enable touch handling support only when it’s Open.
Line drawerTouchHandler.enabled = drawerState.isOpen is an actual
side effect. We’re initializing a callback reference on an external object
as a side effect of the composition.

9. Side-effects in Compose
9
A side-effect is a change to the state of the app
that happens outside the scope of a composable
function.
An effect is a composable function that doesn't
emit UI and causes side effects to run when a
composition completes.

10. Side Effect Example
Shape attribute used to make the Textfield corners round.
10

11. Animations are fundamental for mobile
applications. It gives smooth user experience to
end users. Jetpack Compose has various animation
API's. Choose your suitable API based on your
requirements.
Jetpack Compose Animations
11

12. Illustration of Animation API
12

13. Animations API in
Jetpack Compose
• Animatable is a coroutine-based API for animating a
single value. We can animate color or float values using
this API. It's different from all other animation APIs,
because you can use this API outside of your
composable function.
• Animate*AsState, it's used for animating a single
value. It can be Dp, Color, Float, Integer, Offset, Rect,
Size.
13

14. Animations API in
Jetpack Compose (cont.)
• UpdateTransition, all the previous animations can run
one animation at a time. But updateTransition() can
animate one or multiple animations simultaneously.
• InfiniteTransition, it creates a InfiniteTransition that
runs infinite child animations. Child animations can be
added using InfiniteTransition.animateColor,
InfiniteTransition.animateFloat, or
InfiniteTransition.animateValue.
14