WEBVTT

00:00.920 --> 00:03.500
With the view system example.

00:03.530 --> 00:11.810
Each user interface element is an object containing an internal state that can be updated by calling

00:11.810 --> 00:14.570
a setter or by modifying a property.

00:14.600 --> 00:18.800
With Jetpack Compose, everything becomes different.

00:18.800 --> 00:27.380
Composables are functions that receive as arguments the data they have to use to render the UI, and

00:27.380 --> 00:33.410
when a data changes, the functions are executed again with the new arguments.

00:33.440 --> 00:35.840
Later on, we'll talk about recomposition.

00:35.840 --> 00:39.170
Let's create a new composable function.

00:39.170 --> 00:41.510
I'll name it as counter.

00:41.600 --> 00:48.680
I want from you to focus with me because it's very important concept you should master in Jetpack Compose.

00:48.710 --> 00:52.280
VAR count equals to zero.

00:52.310 --> 01:00.230
I'll create a text or a column at first, and inside this column I'm going to create the first composable,

01:00.230 --> 01:05.270
which is the counter, and the second composable which is a button.

01:05.300 --> 01:10.640
This button will increase the count by one every time the user click on it.

01:10.670 --> 01:17.030
So count plus plus and the text of the button would be increase counter.

01:17.060 --> 01:24.320
Now let me call this method inside the set content method and run our application.

01:24.320 --> 01:25.580
And here we go.

01:25.610 --> 01:28.580
We're happy with this application.

01:28.580 --> 01:31.820
Let's increase the counter by clicking on this button.

01:31.820 --> 01:32.450
Click on it.

01:32.450 --> 01:41.450
But oops, the counter is not increasing despite we write everything correct, but the counter is not

01:41.450 --> 01:43.040
increasing here.

01:43.040 --> 01:53.300
Your code will not work because you should note that not all values will initiate a recomposition when

01:53.300 --> 01:54.170
they change.

01:54.200 --> 01:59.030
Only states can do that, so you can't use this variable.

01:59.030 --> 02:04.100
And if you if you notice the count, it will increase the count variable.

02:04.100 --> 02:07.970
It will increase normally but it will not update the state.

02:07.970 --> 02:12.110
I'll show you how to discover the count value here.

02:12.140 --> 02:20.660
On click I'm going to add a log v tag and I'll set the counter value to count.

02:21.050 --> 02:26.490
Let's run our application again and open Logcat search for tag.

02:27.090 --> 02:32.610
Increase the counter and you can see in the logcat the counter value is one.

02:32.640 --> 02:35.820
Counter value two, three, four, five and so on.

02:35.850 --> 02:44.040
On each click we are increasing the counter value, but the text here is not updating.

02:44.040 --> 02:50.640
You should note that not all values will initiate a decomposition when they change.

02:50.670 --> 02:53.190
Only states can do.

02:53.220 --> 03:00.900
I want from you to write this down to understand the importance of using state in Jetpack Compose.

03:00.900 --> 03:06.540
So again guys, I want from you to understand what we did.

03:06.540 --> 03:08.400
We created this application.

03:08.400 --> 03:16.620
If we increase the counter, it will increase the count value variable, but it will not update the

03:16.620 --> 03:17.190
UI.

03:17.220 --> 03:22.530
So we're going to use the state to solve this problem.

03:22.530 --> 03:29.520
In the next video, we're going to use the state in order to update the UI on each click.