1 00:00:01,490 --> 00:00:07,450 Let's talk about the state hook, and this is the most common, most important hook out of all of them, 2 00:00:08,090 --> 00:00:15,170 and if we check out the documentation, we see that the U.S. state is a hook, we call it inside a function 3 00:00:15,170 --> 00:00:17,360 component to add some local state to it. 4 00:00:18,250 --> 00:00:20,350 So this is exactly what we need. 5 00:00:22,020 --> 00:00:24,960 So we need now the you state hook. 6 00:00:27,030 --> 00:00:31,170 To replicate whatever we did in the constructor here to create the state. 7 00:00:33,170 --> 00:00:38,420 So the way we do that is a little tricky, so hang with me here and then I'll explain exactly what's 8 00:00:38,420 --> 00:00:38,790 happening. 9 00:00:39,320 --> 00:00:44,960 We first declare a constant and in here we'll do a raid to structuring. 10 00:00:45,320 --> 00:00:49,600 That is the use state hook is going to return for us. 11 00:00:49,700 --> 00:00:50,420 Two things. 12 00:00:52,590 --> 00:00:55,440 One is the robots. 13 00:00:56,670 --> 00:01:04,470 Remember, this is part of our state, and the second thing is the function that changes this robots 14 00:01:04,470 --> 00:01:12,000 and usually the standard naming convention is to say set with the name of whatever the state that we're 15 00:01:12,000 --> 00:01:12,720 changing is. 16 00:01:12,720 --> 00:01:15,240 So we'll say set robots. 17 00:01:15,900 --> 00:01:23,580 So cost robots is the state now and robots is the function that changes this state. 18 00:01:24,330 --> 00:01:29,970 So we're going to say equals use state, which we've imported from here. 19 00:01:30,780 --> 00:01:34,620 And then in the new state, we give it the initial state. 20 00:01:34,740 --> 00:01:37,030 So what's the initial state of robots? 21 00:01:37,050 --> 00:01:41,670 Well, right over here, it's an empty array, so we just give it an empty array. 22 00:01:42,760 --> 00:01:49,840 And again, this is a bit of a magic that's happening with react, this idea of hoax isn't a JavaScript 23 00:01:49,840 --> 00:01:50,460 context. 24 00:01:50,470 --> 00:01:53,160 It doesn't really exist in the JavaScript world. 25 00:01:53,440 --> 00:01:55,830 Hooks are very specific. 26 00:01:55,840 --> 00:01:59,740 So there is a bit of magic that's happening in this case. 27 00:01:59,740 --> 00:02:04,680 We just need to understand that you state returns for us just by doing this. 28 00:02:04,900 --> 00:02:08,139 It's going to return for us one a piece of state. 29 00:02:08,500 --> 00:02:14,350 And second, the function that changes that state so we can change or name these variables, whatever 30 00:02:14,350 --> 00:02:16,140 we want to describe our state. 31 00:02:16,750 --> 00:02:19,000 So that's our first piece of state. 32 00:02:19,000 --> 00:02:21,460 And then the next one is the search field. 33 00:02:21,790 --> 00:02:24,190 So once again, I'll say const. 34 00:02:25,340 --> 00:02:26,540 And what should we put here? 35 00:02:26,720 --> 00:02:28,280 Well, the search will. 36 00:02:31,150 --> 00:02:36,130 And then the function that changes the search field, so again, using the standard will do set. 37 00:02:38,190 --> 00:02:39,420 Search field. 38 00:02:41,030 --> 00:02:42,830 Is going to equal U.S. 39 00:02:42,950 --> 00:02:48,020 State and what is the initial state while the initial state is an empty. 40 00:02:51,060 --> 00:02:51,640 There you go. 41 00:02:51,840 --> 00:03:00,510 That's it, we just recreated this part, except now our function has state, it has the robot state 42 00:03:00,630 --> 00:03:02,370 and it has a search field state. 43 00:03:02,640 --> 00:03:05,760 And you'll also notice that it's not in one big state. 44 00:03:05,790 --> 00:03:07,560 Instead, we slice things. 45 00:03:07,560 --> 00:03:12,870 So we have one state for robots and one state for search field, and we keep them separate. 46 00:03:13,620 --> 00:03:16,590 Now, this initial state can be anything you want. 47 00:03:17,040 --> 00:03:19,560 You see here how this does state was an object. 48 00:03:19,560 --> 00:03:22,260 And if we wanted to, we could make this into an object. 49 00:03:22,470 --> 00:03:27,130 But this is completely up to you and what state you want to have in your app. 50 00:03:27,630 --> 00:03:34,320 Now, another thing that tricks a lot of beginners is this array de structuring, which is a new JavaScript 51 00:03:34,320 --> 00:03:34,750 feature. 52 00:03:35,010 --> 00:03:40,800 Essentially, what this allows us to do is it allows us to name our state whatever we want. 53 00:03:41,930 --> 00:03:48,620 So even though you state returns for us a piece of state which will be an empty array initially and 54 00:03:48,620 --> 00:03:54,740 a function to change the state by using a restructuring, we can customize our code and name it whatever 55 00:03:54,740 --> 00:04:01,880 we want instead of the U.S. State Library that react gives us naming it in one way that everybody has 56 00:04:01,880 --> 00:04:02,330 to use. 57 00:04:02,510 --> 00:04:06,590 This is just simple array structuring to name our variables. 58 00:04:08,330 --> 00:04:13,580 Now that we have a piece of state, well, forget about the component did mount for now, we're going 59 00:04:13,580 --> 00:04:21,470 to go to the concert change event and we see here that instead of doing on search change, what we'll 60 00:04:21,470 --> 00:04:28,940 do is remove this set state because we're no longer in a class and instead to change the search field. 61 00:04:29,300 --> 00:04:32,120 All we need to do is say set search field. 62 00:04:32,240 --> 00:04:40,340 So this that says state changes to set search field and this search field can be changed. 63 00:04:40,550 --> 00:04:49,640 So in this case, because we just give it exactly what the change needs to be, we can just remove the 64 00:04:49,640 --> 00:04:55,480 object here and just say event that target value is going to set the search field. 65 00:04:56,150 --> 00:04:58,430 So we got rid of this. 66 00:04:58,790 --> 00:05:00,770 And then what else do we have here? 67 00:05:00,950 --> 00:05:06,470 This starts state here we no longer need because again, we don't have a state object. 68 00:05:06,470 --> 00:05:09,140 Each robots and search field is already here. 69 00:05:09,380 --> 00:05:15,290 So we can just remove this entire line because we already have access to robots and search field. 70 00:05:16,960 --> 00:05:18,430 And then if we go here. 71 00:05:21,430 --> 00:05:24,870 Robots stuff filter, we have that any more this around here? 72 00:05:24,920 --> 00:05:26,070 No, everything should be good. 73 00:05:26,080 --> 00:05:26,770 Let's save. 74 00:05:28,050 --> 00:05:32,640 We see that set robots is assigned a value but never used. 75 00:05:35,680 --> 00:05:41,140 And that is because we haven't implemented the component demand yet, but let's have a look. 76 00:05:42,610 --> 00:05:47,590 If I go back to our app, it's loading because we haven't fetched anything. 77 00:05:47,830 --> 00:05:50,290 But if I open up the developer tools. 78 00:05:51,580 --> 00:05:54,730 And console and let's just log out over here. 79 00:05:55,830 --> 00:05:58,570 Let's just do console, dot log. 80 00:05:59,740 --> 00:06:00,460 Robots. 81 00:06:02,230 --> 00:06:09,820 And then Hirshfield, if I save and go back, we see that we have an array and an empty string, so 82 00:06:09,820 --> 00:06:18,640 we have state, we've created a state inside of our function using the use state hook that allowed us 83 00:06:18,640 --> 00:06:19,330 to finally. 84 00:06:20,630 --> 00:06:29,390 Do exactly what we did with a class component, but in a functional way, next step is to add the life 85 00:06:29,390 --> 00:06:30,620 cycle Hooke's. 86 00:06:31,650 --> 00:06:38,730 Again, remember what hooks our hook is a special function that lets you hook into react feature, we've 87 00:06:38,730 --> 00:06:42,900 hooked in to the state feature of Riak so that we can create state. 88 00:06:43,140 --> 00:06:50,430 The next part is to hook in to the life cycle events that we got with classes, but this time within 89 00:06:50,430 --> 00:06:52,590 a function I'll see in the next one. 90 00:06:53,050 --> 00:06:53,400 Papy.