1 00:00:01,140 --> 00:00:02,670 ‫Let's now remove some 2 00:00:02,670 --> 00:00:05,700 ‫of the boilerplate code that we have been writing 3 00:00:05,700 --> 00:00:09,363 ‫using the modern JavaScript class fields feature. 4 00:00:10,950 --> 00:00:14,100 ‫But before we do that, let's quickly duplicate 5 00:00:14,100 --> 00:00:19,100 ‫our file again and rename this one to version 1, 6 00:00:19,740 --> 00:00:23,763 ‫so then you can keep both versions of doing things. 7 00:00:25,080 --> 00:00:28,650 ‫So yeah, let's come back here to our app component 8 00:00:28,650 --> 00:00:31,770 ‫and now use the class fields feature. 9 00:00:31,770 --> 00:00:34,680 ‫So, in JavaScript with class fields, 10 00:00:34,680 --> 00:00:37,890 ‫we can basically declare properties directly 11 00:00:37,890 --> 00:00:42,150 ‫on a component instance, right in the class definition, 12 00:00:42,150 --> 00:00:45,300 ‫so outside of any method. 13 00:00:45,300 --> 00:00:49,530 ‫So, basically what we can do is taking this 14 00:00:49,530 --> 00:00:52,980 ‫and pasting it right here. 15 00:00:52,980 --> 00:00:54,030 ‫And so with this, 16 00:00:54,030 --> 00:00:57,603 ‫we can then completely remove this thing from here. 17 00:00:58,560 --> 00:01:02,760 ‫And notice that here we do not need any "this" keyword word 18 00:01:02,760 --> 00:01:06,030 ‫because this will basically simply be placed 19 00:01:06,030 --> 00:01:07,950 ‫on the component instance. 20 00:01:07,950 --> 00:01:11,760 ‫And since the "this" keyword is also the component instance, 21 00:01:11,760 --> 00:01:15,030 ‫well then, that's really not needed anymore. 22 00:01:15,030 --> 00:01:16,710 ‫So we just basically take 23 00:01:16,710 --> 00:01:20,340 ‫everything that we want to declare on a class instance 24 00:01:20,340 --> 00:01:23,340 ‫and place that here outside. 25 00:01:23,340 --> 00:01:28,050 ‫So again, that's a JavaScript feature, not a React feature. 26 00:01:28,050 --> 00:01:32,460 ‫And so if we now save this and then run our code again here, 27 00:01:32,460 --> 00:01:34,590 ‫then you see that it still works. 28 00:01:34,590 --> 00:01:37,080 ‫So, it's doing the exact same thing. 29 00:01:37,080 --> 00:01:41,010 ‫So, that's already a huge win, but we can do even better 30 00:01:41,010 --> 00:01:46,010 ‫because we can also define methods as class fields as well. 31 00:01:46,410 --> 00:01:50,190 ‫So, instead of writing a method in the traditional way, 32 00:01:50,190 --> 00:01:52,950 ‫we can instead do this. 33 00:01:52,950 --> 00:01:55,020 ‫So let's comment out this part. 34 00:01:55,020 --> 00:02:00,020 ‫And so now we can do fetch Weather like this 35 00:02:01,140 --> 00:02:03,900 ‫and then we can simply assign a function value 36 00:02:03,900 --> 00:02:05,670 ‫to this variable. 37 00:02:05,670 --> 00:02:07,470 ‫And the great thing about this 38 00:02:07,470 --> 00:02:10,530 ‫is that we can now use an arrow function here. 39 00:02:10,530 --> 00:02:13,710 ‫And the great advantage of that is that arrow functions 40 00:02:13,710 --> 00:02:17,550 ‫do not lose their binding to the "this" keyword. 41 00:02:17,550 --> 00:02:20,760 ‫So arrow functions don't have their own "this" keyword, 42 00:02:20,760 --> 00:02:24,060 ‫and instead they get access to the surrounding one, 43 00:02:24,060 --> 00:02:27,363 ‫and therefore we then no longer will have to do this. 44 00:02:28,470 --> 00:02:33,470 ‫So watch as I type async, and then again, an arrow function, 45 00:02:36,360 --> 00:02:40,030 ‫and I'm missing just the curly braces here 46 00:02:41,220 --> 00:02:43,050 ‫but that should be enough. 47 00:02:43,050 --> 00:02:45,423 ‫And so now I can delete this. 48 00:02:46,740 --> 00:02:49,110 ‫So let's try that. 49 00:02:49,110 --> 00:02:52,380 ‫And yeah, it still works exactly the same. 50 00:02:52,380 --> 00:02:55,260 ‫And so now we no longer need this. 51 00:02:55,260 --> 00:02:57,750 ‫So yes, Lint even tells us that this 52 00:02:57,750 --> 00:02:59,523 ‫is now a useless constructor. 53 00:03:00,810 --> 00:03:03,030 ‫So with this, we got rid 54 00:03:03,030 --> 00:03:05,790 ‫of all the boilerplate code that we had 55 00:03:05,790 --> 00:03:09,060 ‫and the biggest win by far is this one here, 56 00:03:09,060 --> 00:03:10,530 ‫so that we no longer need 57 00:03:10,530 --> 00:03:12,600 ‫to manually bind the "this" keyword 58 00:03:12,600 --> 00:03:14,760 ‫to our event handler methods. 59 00:03:14,760 --> 00:03:17,460 ‫So now these methods are basically defined 60 00:03:17,460 --> 00:03:18,870 ‫as a normal variable. 61 00:03:18,870 --> 00:03:21,060 ‫And so then using the async function, 62 00:03:21,060 --> 00:03:22,590 ‫that problem that we had 63 00:03:22,590 --> 00:03:24,993 ‫with the "this" keyword simply disappears. 64 00:03:25,950 --> 00:03:28,200 ‫Now, this function here is really huge, 65 00:03:28,200 --> 00:03:31,470 ‫but unfortunately for us, with class components, 66 00:03:31,470 --> 00:03:35,220 ‫there is no easy way of extracting it into, 67 00:03:35,220 --> 00:03:37,860 ‫well, somewhere else, basically. 68 00:03:37,860 --> 00:03:40,590 ‫So we cannot just remove this function from here 69 00:03:40,590 --> 00:03:44,730 ‫like we could do with custom hooks in function components. 70 00:03:44,730 --> 00:03:48,210 ‫So if we have a lot of long methods like this, 71 00:03:48,210 --> 00:03:51,780 ‫then our components can get really annoyingly long. 72 00:03:51,780 --> 00:03:54,570 ‫But again, there's not really a way around this 73 00:03:54,570 --> 00:03:57,090 ‫but I still wanted to mention this here 74 00:03:57,090 --> 00:04:00,330 ‫just so you could see another great advantage 75 00:04:00,330 --> 00:04:02,163 ‫of functional components.