WEBVTT

1
00:00:00.320 --> 00:00:02.700
Hello and welcome to this
video on React native.

2
00:00:02.730 --> 00:00:05.780
Today we're going to be
learning about useState.

3
00:00:05.800 --> 00:00:07.220
If you're new to React Native,

4
00:00:07.250 --> 00:00:11.010
you might be wondering what useState
is and why you should use it.

5
00:00:11.040 --> 00:00:13.460
Well, sit tight and let's dive in.

6
00:00:13.490 --> 00:00:17.420
useState is a hook that lets you add
state to your functional components.

7
00:00:17.450 --> 00:00:19.780
It is an essential part of managing data

8
00:00:19.810 --> 00:00:23.860
in React Native and allows you to manage
state variables in your components.

9
00:00:23.890 --> 00:00:26.620
React Native makes it
to build mobile application.

10
00:00:26.650 --> 00:00:30.260
But when it comes to managing data,
it can be a bit tricky.

11
00:00:30.290 --> 00:00:32.020
That's where useState comes in.

12
00:00:32.050 --> 00:00:35.500
By using useState,
you can manage state variables in your

13
00:00:35.530 --> 00:00:39.780
components and make your application
more dynamic and interactive.

14
00:00:39.810 --> 00:00:44.620
Now let's see how we can use
useState in a simple example.

15
00:00:44.650 --> 00:00:50.020
So we have our Hello World
application open in our editor

16
00:00:50.050 --> 00:00:51.460
and I want to run this.

17
00:00:51.490 --> 00:00:57.180
So I'm going to go to my terminal,
then I'm going to go to desktop and I'm

18
00:00:57.210 --> 00:01:01.940
going to go into the Hello World
application project and I'm going to do

19
00:01:01.970 --> 00:01:09.820
npx React Native run-ios, which should
open this project in the iOS simulator.

20
00:01:09.850 --> 00:01:14.410
So let's put the simulator here
so that we see it.

21
00:01:14.440 --> 00:01:16.700
It opened the Metro bundler.

22
00:01:16.730 --> 00:01:20.770
I'm going to press I so
that it shows up here.

23
00:01:20.800 --> 00:01:24.280
And please don't close your Metro bundler
otherwise the changes that we're going

24
00:01:24.310 --> 00:01:27.260
to be making is not going
to be visible here.

25
00:01:27.290 --> 00:01:28.540
So here we see.

26
00:01:28.570 --> 00:01:32.420
The only thing that this really
does is displays Hello World.

27
00:01:32.450 --> 00:01:36.260
But what we could do is use
state to display this text.

28
00:01:36.290 --> 00:01:39.850
So in order to use state,

29
00:01:39.880 --> 00:01:43.340
you would have to import
it from here, from React.

30
00:01:43.370 --> 00:01:47.100
And then what you want
to do is create a variable.

31
00:01:47.130 --> 00:01:49.290
And the first thing that's going to go

32
00:01:49.320 --> 00:01:53.180
here is going to be the variable
that's going to be displayed.

33
00:01:53.210 --> 00:01:55.740
So let's call it text.

34
00:01:55.770 --> 00:01:58.420
And if you want to change this text later

35
00:01:58.450 --> 00:02:03.570
when some user interaction happens,
you can create set text.

36
00:02:03.600 --> 00:02:09.890
And the initial value of useState is
going to be defined inside here.

37
00:02:09.920 --> 00:02:14.300
So if you pass nothing,
this is going to return nothing as well.

38
00:02:14.320 --> 00:02:15.580
So let's see this in action.

39
00:02:15.610 --> 00:02:17.960
I'm just going to save this here and I'm

40
00:02:17.990 --> 00:02:21.610
going to use this text
variable inside here.

41
00:02:21.640 --> 00:02:23.220
And to use the variable,

42
00:02:23.250 --> 00:02:28.280
we're going to have to open the braces
to let the React native know that we are

43
00:02:28.310 --> 00:02:31.700
about to write some JavaScript
expression inside here.

44
00:02:31.730 --> 00:02:34.420
And then we're just going
to use the text variable.

45
00:02:34.440 --> 00:02:37.060
So if we were to save this now,
we're going to see nothing.

46
00:02:37.090 --> 00:02:40.700
Because our initial value
was set to nothing.

47
00:02:40.730 --> 00:02:43.540
This state is set to an empty state.

48
00:02:43.570 --> 00:02:52.610
But if we were to pass Hello World here,
we would see that this text would actually

49
00:02:52.640 --> 00:02:55.980
have value and its value
would be Hello World.

50
00:02:56.010 --> 00:02:58.700
Now what if we want to change this text

51
00:02:58.730 --> 00:03:06.260
on press of text here,
we can set up an on press event handler

52
00:03:06.290 --> 00:03:13.140
and we can say set text
and here we can pass a new value.

53
00:03:13.170 --> 00:03:22.220
Let's say hello world,
I learned how to change state.

54
00:03:22.250 --> 00:03:24.880
Let's save this.

55
00:03:25.040 --> 00:03:28.340
And now if we were to click on this text

56
00:03:28.370 --> 00:03:34.260
component we would see hello world,
I learned how to change state.

57
00:03:34.290 --> 00:03:38.020
So this is the simplest
example for how to use states.

58
00:03:38.050 --> 00:03:42.610
And useStates are an essential tool
for managing data in react native.

59
00:03:42.640 --> 00:03:44.820
It allows you to create state variables

60
00:03:44.850 --> 00:03:47.820
that can be updated and used
in your components.

61
00:03:47.850 --> 00:03:50.500
And with useState you can build dynamic

62
00:03:50.530 --> 00:03:54.980
and interactive applications that are
more engaging for your users.

63
00:03:55.010 --> 00:03:59.380
There's a lot more that you can achieve
with useState such as updating multiple

64
00:03:59.410 --> 00:04:03.500
state variables using the previous
state value and more.

65
00:04:03.530 --> 00:04:05.580
So get started with useState today

66
00:04:05.610 --> 00:04:09.300
and build amazing applications
with React native.

67
00:04:09.320 --> 00:04:10.700
Thanks so much for watching.

68
00:04:10.730 --> 00:04:15.840
In the the next video we are going
to be covering what use effect is.