1 00:00:00,720 --> 00:00:05,000 In the last section we refactored our functional app component over to a class based one. 2 00:00:05,190 --> 00:00:09,840 As I've mentioned several times now just doing this three factor alone is not going to solve the issue 3 00:00:09,840 --> 00:00:14,090 that we have with the get current position call taking some amount of time. 4 00:00:14,490 --> 00:00:18,930 In this video we're going to start to introduce the idea of states in react and that's the actual system 5 00:00:18,930 --> 00:00:21,860 that's going to solve this problem that we're running into. 6 00:00:21,900 --> 00:00:23,850 Now regarding the state system and react. 7 00:00:23,880 --> 00:00:26,800 I've got some good news for you and some bad news. 8 00:00:27,000 --> 00:00:32,400 The good news is that once we understand state it's really going to open the door in react and it's 9 00:00:32,400 --> 00:00:38,460 going to allow us to easily make really interesting applications as opposed to the somewhat more simplistic 10 00:00:38,460 --> 00:00:39,980 ones that we're working on right now. 11 00:00:40,200 --> 00:00:44,820 So once we kind of get over this topic the world is our oyster and we get to start working on some pretty 12 00:00:44,820 --> 00:00:45,950 interesting apps. 13 00:00:45,960 --> 00:00:47,130 That's the good news. 14 00:00:47,130 --> 00:00:53,380 The bad news is that traditionally working on state and learning how state works is a little bit challenging. 15 00:00:53,400 --> 00:00:59,340 Trust me I've taught many many many people about react and without fail the state system ends up being 16 00:00:59,400 --> 00:01:00,860 a little bit challenging. 17 00:01:01,080 --> 00:01:05,580 Now when you're teaching someone a new topic as I am for you right now you're not really supposed to 18 00:01:05,580 --> 00:01:08,760 tell them that hey this thing you're about to learn is really hard. 19 00:01:08,760 --> 00:01:13,950 The reason I tell you that it's something challenging is so that you understand that you need to kind 20 00:01:13,950 --> 00:01:17,750 of go into these next couple of videos really listening and paying attention. 21 00:01:17,790 --> 00:01:21,390 I'm going to be repeating myself a lot in the next couple videos. 22 00:01:21,390 --> 00:01:24,400 The same kind of facts over and over and over about state. 23 00:01:24,450 --> 00:01:27,160 And the reason I'm doing that is not because I like to hear myself talk. 24 00:01:27,210 --> 00:01:31,920 It's so that you can really start to internalize the ideas around state and really start to develop 25 00:01:31,950 --> 00:01:33,650 an intuition of around it. 26 00:01:33,800 --> 00:01:34,010 OK. 27 00:01:34,020 --> 00:01:35,100 So that's my pep talk. 28 00:01:35,100 --> 00:01:38,420 Without further ado let's actually start talking about states. 29 00:01:38,430 --> 00:01:41,010 All right so we have previously rules of class components. 30 00:01:41,010 --> 00:01:44,680 Now we're going to talk about the rules of the state system in react. 31 00:01:44,780 --> 00:01:46,160 So I'm going to zoom in here. 32 00:01:46,230 --> 00:01:48,600 We're going to talk about each of these items on this list right here. 33 00:01:48,600 --> 00:01:49,350 Very quickly. 34 00:01:49,410 --> 00:01:53,730 We'll then take a pause and then write a little bit of code to understand how state works. 35 00:01:53,730 --> 00:02:00,570 So first real estate only usable with class based components which is what we just refactor to inside 36 00:02:00,600 --> 00:02:01,970 of our app component. 37 00:02:01,980 --> 00:02:04,220 Now I've got this little note over here. 38 00:02:04,230 --> 00:02:08,910 Tiny tiny little note that only going to mention in very very brief passing. 39 00:02:08,940 --> 00:02:14,550 Technically we can use state with functional components using the host system which is something that 40 00:02:14,550 --> 00:02:16,700 we're going to discuss way later in the course. 41 00:02:16,830 --> 00:02:22,200 But trust me that whole system my opinion way more challenging to understand than just using state inside 42 00:02:22,200 --> 00:02:23,540 of a class based component. 43 00:02:23,550 --> 00:02:28,860 So right now even though this is not like 100 percent really true we're just going to accept this as 44 00:02:28,860 --> 00:02:32,320 reality because it makes understanding state many times easier. 45 00:02:32,510 --> 00:02:32,930 OK. 46 00:02:33,330 --> 00:02:38,610 So next item you will confuse prop's with state and that's a frowny face right there because this is 47 00:02:38,610 --> 00:02:42,010 the unfortunate reality the prop system and the state system. 48 00:02:42,020 --> 00:02:47,130 At the end of the day they are two very different things but they are very easy to get mixed up. 49 00:02:47,160 --> 00:02:51,690 So we're going to go to the next couple of videos we're going to say over and over and over what the 50 00:02:51,690 --> 00:02:54,820 differences are between state and prop's. 51 00:02:54,900 --> 00:03:01,890 So what is state after all is discussion what is state state is a javascript object that contains some 52 00:03:01,950 --> 00:03:06,280 amount of data that is relevant to a singular component. 53 00:03:06,630 --> 00:03:13,500 In our case we would have one piece of state or one state property that is relevant to our app component 54 00:03:13,830 --> 00:03:18,000 and that one single piece of state that one single property that we care about in our app component 55 00:03:18,360 --> 00:03:22,630 is the user's current latitude which we get out of that position object. 56 00:03:22,680 --> 00:03:26,940 Think about it we don't actually care about the entire position object we don't care about the like 57 00:03:26,940 --> 00:03:28,350 velocity I think was in there. 58 00:03:28,350 --> 00:03:31,870 There was also like a time stamp and there is also the longitude. 59 00:03:31,890 --> 00:03:34,370 We don't care about those other properties for our app. 60 00:03:34,380 --> 00:03:37,970 The only thing that we care about inside of here is that latitude. 61 00:03:37,980 --> 00:03:39,740 That's it. 62 00:03:39,740 --> 00:03:45,690 So with the state system we create a javascript object that is going to contain some amount of data 63 00:03:45,780 --> 00:03:49,100 that is strictly relevant to our component that we're working on. 64 00:03:49,950 --> 00:03:56,470 All right next item updating States or updating properties inside this javascript object on a component 65 00:03:56,740 --> 00:04:02,680 will cause our component to almost instantly re-enter and that's going to solve one of the issues that 66 00:04:02,680 --> 00:04:04,410 we ran into back over here. 67 00:04:04,420 --> 00:04:10,030 Remember we want to somehow show our component on the screen when our application first starts up and 68 00:04:10,030 --> 00:04:14,890 then some number of seconds later when we get the results of geolocation we then want to somehow get 69 00:04:14,890 --> 00:04:20,310 our component to render itself or update the content that is showing on the screen. 70 00:04:20,320 --> 00:04:24,650 So the key of getting a component to the Render is to update its States. 71 00:04:24,670 --> 00:04:28,390 And that's something that we're going to reference again and again and again throughout this course 72 00:04:28,570 --> 00:04:31,690 if we want to get a single component to update itself. 73 00:04:31,690 --> 00:04:34,550 We will update it states. 74 00:04:34,610 --> 00:04:34,830 All right. 75 00:04:34,830 --> 00:04:39,840 Next item state must be initialized when a component is first created. 76 00:04:39,840 --> 00:04:44,670 So the state is going to contain some amount of information that is relevant to a component and thus 77 00:04:44,680 --> 00:04:48,690 when we first create the component we have to initialize our state. 78 00:04:48,720 --> 00:04:53,880 That essentially means that when we create this component right here or an instance of this class we 79 00:04:53,880 --> 00:04:58,140 have to initialize the state property and I'll show you how to do that in great great detail in just 80 00:04:58,140 --> 00:04:58,680 a moment. 81 00:04:58,770 --> 00:05:04,020 But right now I just want you understand that it must be initialized and as the last item and this one 82 00:05:04,020 --> 00:05:09,030 is probably the most important one is so important I'm going to zoom in on it and I can delete these 83 00:05:09,030 --> 00:05:15,630 other two so you can only see it's by itself a state property or that state object can only be updated 84 00:05:15,810 --> 00:05:19,050 using the function set States. 85 00:05:19,070 --> 00:05:20,490 Now we don't know what set state as yet. 86 00:05:20,500 --> 00:05:26,110 We haven't spoken about it at all but I'm going to repeat this line to you nonstop because this is by 87 00:05:26,110 --> 00:05:30,650 far the most common error that everyone makes when they start learning react. 88 00:05:30,670 --> 00:05:35,500 They try to update their state and they do it in ways that they are used to doing with javascript which 89 00:05:35,500 --> 00:05:37,420 is not the right way to do it. 90 00:05:37,480 --> 00:05:41,380 So we don't have a good example of this we haven't seen what set status we haven't even seen an example 91 00:05:41,380 --> 00:05:41,930 of states. 92 00:05:41,980 --> 00:05:43,450 But I want to put this in your head. 93 00:05:43,450 --> 00:05:48,110 We only update state using the function set States. 94 00:05:48,150 --> 00:05:48,790 All right. 95 00:05:49,620 --> 00:05:54,750 So going over these points is probably pretty darn confusing without seeing any code or anything like 96 00:05:54,750 --> 00:05:55,310 that. 97 00:05:55,470 --> 00:05:56,890 So let's take a quick pause right here. 98 00:05:56,910 --> 00:06:01,200 When we come back the next section we're going to start to implement state into our app component and 99 00:06:01,200 --> 00:06:04,940 that's going to give us a much better idea of what all these different rules mean. 100 00:06:04,970 --> 00:06:07,010 It's a quick pause and I'll see you in just a minute.