1 00:00:02,350 --> 00:00:04,070 So now we learned about State. 2 00:00:04,070 --> 00:00:06,440 And State as you can probably tell by now 3 00:00:06,440 --> 00:00:09,000 is a key concept in React. 4 00:00:09,000 --> 00:00:10,780 Now, there are a couple of things 5 00:00:10,780 --> 00:00:12,980 I wanna clarify about useState 6 00:00:12,980 --> 00:00:16,690 and about why we use a const here, for example. 7 00:00:16,690 --> 00:00:19,360 Now, first let's start with one important thing, 8 00:00:19,360 --> 00:00:21,550 which I did mention in the last lecture already. 9 00:00:21,550 --> 00:00:25,220 UseState registers some State, 10 00:00:25,220 --> 00:00:27,680 so some value as a State 11 00:00:27,680 --> 00:00:30,990 for the component in which it is being called. 12 00:00:30,990 --> 00:00:34,100 And I wanna be even more precise here. 13 00:00:34,100 --> 00:00:38,490 It registers it for a specific component instance. 14 00:00:38,490 --> 00:00:40,530 For example, ExpenseItem here 15 00:00:40,530 --> 00:00:43,370 is being used four times, right? 16 00:00:43,370 --> 00:00:46,987 And Expenses.js we have four ExpenseItems. 17 00:00:47,920 --> 00:00:52,190 Now, every item receives its own separate State 18 00:00:52,190 --> 00:00:54,900 which is detached from the other States. 19 00:00:54,900 --> 00:00:57,600 We have one ExpenseItem definition here, 20 00:00:57,600 --> 00:01:01,550 but then this function is basically called four times 21 00:01:01,550 --> 00:01:04,110 when we create four ExpenseItems. 22 00:01:04,110 --> 00:01:08,710 And every time it's called, a new separate State is created 23 00:01:08,710 --> 00:01:10,360 of course in the same way 24 00:01:10,360 --> 00:01:14,240 but managed independently by React. 25 00:01:14,240 --> 00:01:16,150 So if we change the title 26 00:01:16,150 --> 00:01:18,940 in the first ExpenseItem 27 00:01:20,330 --> 00:01:22,270 the other ones are not affected 28 00:01:22,270 --> 00:01:24,720 because they have their own State. 29 00:01:24,720 --> 00:01:25,930 That's really important. 30 00:01:25,930 --> 00:01:29,810 It's on a per component instance basis. 31 00:01:29,810 --> 00:01:31,760 So we have separate States, 32 00:01:31,760 --> 00:01:34,850 even if we create a component more than once. 33 00:01:34,850 --> 00:01:36,740 And that's of course crucial 34 00:01:36,740 --> 00:01:39,940 because it would be a rather undesired behavior 35 00:01:39,940 --> 00:01:42,670 if we change something in one item 36 00:01:42,670 --> 00:01:45,820 and all the other items are updated as well. 37 00:01:45,820 --> 00:01:47,903 So that's a good thing to have. 38 00:01:49,966 --> 00:01:53,090 Now, in addition, whenever State changes 39 00:01:53,090 --> 00:01:55,270 because we click a button in this case 40 00:01:55,270 --> 00:01:57,600 it's only this component function 41 00:01:57,600 --> 00:02:00,070 and only that specific instance 42 00:02:00,070 --> 00:02:02,280 where this component is being used 43 00:02:02,280 --> 00:02:05,710 where React will re-evaluate it. 44 00:02:05,710 --> 00:02:07,900 And you can tell that this is the fact 45 00:02:07,900 --> 00:02:11,310 if you add a number of console.log here 46 00:02:11,310 --> 00:02:13,610 in the component, function itself, 47 00:02:13,610 --> 00:02:18,610 where you say ExpenseItem evaluated by React. 48 00:02:20,650 --> 00:02:23,250 This will be called whenever the ExpenseItem 49 00:02:23,250 --> 00:02:26,460 component function is being executed. 50 00:02:26,460 --> 00:02:31,230 And therefore if I reload, we see it's called four times 51 00:02:31,230 --> 00:02:32,430 which makes a lot of sense 52 00:02:32,430 --> 00:02:36,140 because we're using ExpenseItem four times in expenses. 53 00:02:36,140 --> 00:02:38,240 So four separate instances 54 00:02:38,240 --> 00:02:40,803 of this component are being created. 55 00:02:41,960 --> 00:02:44,230 But if I now click on change title 56 00:02:44,230 --> 00:02:46,420 in one of the ExpenseItems, 57 00:02:46,420 --> 00:02:49,090 we see it's only printed once. 58 00:02:49,090 --> 00:02:50,460 Which is basically happening 59 00:02:50,460 --> 00:02:52,600 because of what I just explained. 60 00:02:52,600 --> 00:02:55,930 Only that specific instance is being updated 61 00:02:55,930 --> 00:02:58,340 and therefore for being re-evaluated, 62 00:02:58,340 --> 00:03:01,420 and the other instances are not effected 63 00:03:01,420 --> 00:03:03,850 by that State change. 64 00:03:03,850 --> 00:03:05,650 And that's important to keep in mind 65 00:03:05,650 --> 00:03:08,080 that State really is separated 66 00:03:08,080 --> 00:03:11,093 on a per component instance basis. 67 00:03:12,100 --> 00:03:14,910 Now there's one other thing which could be confusing. 68 00:03:14,910 --> 00:03:18,040 And that's the fact that I'm using const here. 69 00:03:18,040 --> 00:03:20,170 Why am I using const here 70 00:03:20,170 --> 00:03:23,233 when we do eventually assign a new value? 71 00:03:24,560 --> 00:03:26,060 Well, keep in mind 72 00:03:26,060 --> 00:03:29,150 that we're not assigning a value with the equal sign. 73 00:03:29,150 --> 00:03:30,840 That would indeed fail 74 00:03:30,840 --> 00:03:33,670 but that is not how we assign a new value 75 00:03:33,670 --> 00:03:35,670 when we update a State. 76 00:03:35,670 --> 00:03:38,730 Instead we call this State updating function, 77 00:03:38,730 --> 00:03:43,010 and the concrete value is simply managed somewhere else 78 00:03:43,010 --> 00:03:44,210 by React. 79 00:03:44,210 --> 00:03:47,200 By calling useState we tell React 80 00:03:47,200 --> 00:03:49,780 that it should manage some value for us. 81 00:03:49,780 --> 00:03:52,833 We never see that variable itself. 82 00:03:53,810 --> 00:03:56,330 So therefore, we just call a function 83 00:03:56,330 --> 00:03:59,140 and we never assign a new value to title 84 00:03:59,140 --> 00:04:00,860 with the equal operator. 85 00:04:00,860 --> 00:04:03,653 And therefore, using a const is absolutely fine. 86 00:04:04,770 --> 00:04:08,130 How do we get the latest title value then though? 87 00:04:08,130 --> 00:04:10,460 Well, keep in mind that the component function 88 00:04:10,460 --> 00:04:13,310 is re-executed when the State is updated. 89 00:04:13,310 --> 00:04:15,670 And therefore, of course, this line of code, 90 00:04:15,670 --> 00:04:18,820 line nine, also is executed again 91 00:04:18,820 --> 00:04:21,773 whenever the component function is executed again. 92 00:04:22,720 --> 00:04:24,290 So if we called setTitle 93 00:04:25,150 --> 00:04:27,170 and we assign a new title, 94 00:04:27,170 --> 00:04:30,230 that leads to this component being called again 95 00:04:30,230 --> 00:04:35,230 and therefore, this new title, this updated title 96 00:04:35,230 --> 00:04:39,910 is fetched from React, which manages the State for us. 97 00:04:39,910 --> 00:04:41,560 Basically we go to React 98 00:04:41,560 --> 00:04:45,510 and say, "Hey please give me that latest title State 99 00:04:45,510 --> 00:04:48,020 which I told you to manage for me." 100 00:04:48,020 --> 00:04:51,880 And React provides us this latest State in this array 101 00:04:51,880 --> 00:04:54,710 which useState always returns. 102 00:04:54,710 --> 00:04:57,620 So we always get a brand new snapshot 103 00:04:57,620 --> 00:05:02,120 of that State when this component function re-executes. 104 00:05:02,120 --> 00:05:04,133 That's how this works under the hood. 105 00:05:05,930 --> 00:05:08,620 Now you might be wondering if that doesn't mean 106 00:05:08,620 --> 00:05:12,010 that we always overwrite any State changes 107 00:05:12,010 --> 00:05:14,050 with props.title again, here. 108 00:05:14,050 --> 00:05:17,570 And here, the special thing is that React keeps track 109 00:05:17,570 --> 00:05:21,310 of when we call useState in a given component instance 110 00:05:21,310 --> 00:05:23,270 for the first time. 111 00:05:23,270 --> 00:05:26,090 And when we call it for the first time ever, 112 00:05:26,090 --> 00:05:29,150 it'll take that argument as an initial value. 113 00:05:29,150 --> 00:05:32,220 But if a component is then re-executed 114 00:05:32,220 --> 00:05:34,980 because of such a State change, for example, 115 00:05:34,980 --> 00:05:38,570 React will not reinitialize the State. 116 00:05:38,570 --> 00:05:42,370 Instead, it will detect that this State had been initialized 117 00:05:42,370 --> 00:05:45,850 in the past, and it will just grab the latest State 118 00:05:45,850 --> 00:05:48,490 which is based on some State update, for example, 119 00:05:48,490 --> 00:05:50,900 and give us that State instead. 120 00:05:50,900 --> 00:05:54,270 So this initial value is really only considered 121 00:05:54,270 --> 00:05:57,030 when this component function is being executed 122 00:05:57,030 --> 00:06:01,720 for the first time, for a given component instance. 123 00:06:01,720 --> 00:06:05,350 And I know that this is a lot of knowledge about State 124 00:06:05,350 --> 00:06:08,540 and it might be confusing to a certain extent. 125 00:06:08,540 --> 00:06:10,120 It is just important 126 00:06:10,120 --> 00:06:12,950 to understand how State works under the hood, 127 00:06:12,950 --> 00:06:16,000 because if you're don't fully understand that 128 00:06:16,000 --> 00:06:17,870 then you will run into problems 129 00:06:17,870 --> 00:06:20,360 in more complex React applications 130 00:06:20,360 --> 00:06:23,740 where suddenly some value isn't updated 131 00:06:23,740 --> 00:06:25,760 as you expected it to be. 132 00:06:25,760 --> 00:06:29,010 That's why I'm explaining this in great detail. 133 00:06:29,010 --> 00:06:32,290 In a nutshell, using State is simple though. 134 00:06:32,290 --> 00:06:35,108 You just register State with useState, 135 00:06:35,108 --> 00:06:37,460 you always get back two values; 136 00:06:37,460 --> 00:06:40,320 the value itself and the updating function. 137 00:06:40,320 --> 00:06:42,150 You call the updating function 138 00:06:42,150 --> 00:06:44,340 whenever the State should change, 139 00:06:44,340 --> 00:06:46,200 and you use that first element 140 00:06:46,200 --> 00:06:48,430 whenever you wanna use the State value, 141 00:06:48,430 --> 00:06:51,830 like here for outputting it in the JSX code. 142 00:06:51,830 --> 00:06:53,480 And React, will do the rest 143 00:06:53,480 --> 00:06:56,570 and it will re-execute the component function 144 00:06:56,570 --> 00:06:59,880 and re-evaluate the JSX code therefore; 145 00:06:59,880 --> 00:07:02,130 whenever the State changes. 146 00:07:02,130 --> 00:07:05,340 That's State and that's an important concept 147 00:07:05,340 --> 00:07:10,010 because it's State which adds reactivity to our application. 148 00:07:10,010 --> 00:07:13,870 Without State, our user interface would never change. 149 00:07:13,870 --> 00:07:17,870 But with State and with listening to events, 150 00:07:17,870 --> 00:07:21,370 we can make sure that we can react to user input 151 00:07:21,370 --> 00:07:23,870 and that such input can result 152 00:07:23,870 --> 00:07:27,190 in a visible change on our screen. 153 00:07:27,190 --> 00:07:30,070 So State is a super important concept 154 00:07:30,070 --> 00:07:32,760 and of course being able to listen to user events 155 00:07:32,760 --> 00:07:34,793 is also important as you can tell.