1 00:00:02,210 --> 00:00:08,540 State is a crucial concept in React and therefore it's important to me that you understand how it works. 2 00:00:08,680 --> 00:00:14,750 Use state is how you manage state in functional components and your state can be anything, it doesn't 3 00:00:14,750 --> 00:00:15,590 have to be an array, 4 00:00:15,590 --> 00:00:21,550 it could be some text, a number, an object, an array, a boolean, anything like that. 5 00:00:21,560 --> 00:00:26,190 Use state always returns an array with two elements, no matter what your state is, 6 00:00:26,210 --> 00:00:32,570 if your state is a number, use state still returns an array with exactly two elements because the first element 7 00:00:32,600 --> 00:00:39,560 then always is your latest state snapshot and the second element is a function that allows you to update 8 00:00:39,710 --> 00:00:44,480 that state snapshot. Whenever you update the state snapshot, 9 00:00:44,510 --> 00:00:46,610 React will do two things; 10 00:00:46,610 --> 00:00:50,200 it will update the internally stored state data, 11 00:00:50,240 --> 00:00:56,480 so for example here when we add our first new goal, it will replace the initial state with our brand 12 00:00:56,510 --> 00:00:57,190 new state, 13 00:00:57,200 --> 00:01:03,350 in this case with the brand new array we created with concat and once it did update the data internally, 14 00:01:03,680 --> 00:01:10,260 it will call this component function again and execute the entire function and hence also re-render this 15 00:01:10,260 --> 00:01:11,950 jsx code. 16 00:01:12,030 --> 00:01:16,730 Now under the hood, it will not re-render the entire DOM, it will just check which parts of the DOM need 17 00:01:16,730 --> 00:01:20,930 to be updated but it will re-evaluate the entire component. 18 00:01:20,930 --> 00:01:27,140 This also means of course that it re-executes use state but use state internally works such that it 19 00:01:27,230 --> 00:01:32,390 only initializes that state when the component is rendered for the first time and for subsequent 20 00:01:32,390 --> 00:01:39,020 re-render cycles, it just pulls out the latest state snapshot and basically ignores the initial value we 21 00:01:39,020 --> 00:01:39,830 set up here. 22 00:01:41,580 --> 00:01:44,340 This is how state works. 23 00:01:44,340 --> 00:01:49,230 Now it is also important to understand that this way of updating our state in this scenario is not the 24 00:01:49,230 --> 00:01:50,580 best possible way, 25 00:01:50,660 --> 00:01:53,110 so I'll duplicate it and comment it out 26 00:01:53,190 --> 00:01:54,920 so that we still have it for reference 27 00:01:54,930 --> 00:01:57,360 but we also see the better approach. 28 00:01:57,360 --> 00:02:03,030 This approach clearly works and in most cases it will work but you have to be aware that this whole 29 00:02:03,300 --> 00:02:09,360 state updating re-rendering part of React is in the end managed by React 30 00:02:09,360 --> 00:02:15,900 and when you set a new state, it doesn't pause everything and immediately re-render your app, instead 31 00:02:15,930 --> 00:02:18,150 it schedules the state update 32 00:02:18,150 --> 00:02:23,550 and if you have an application with a lot of ongoing state updates and a lot of work being performed, 33 00:02:23,820 --> 00:02:29,280 which is not the case in this application but can be the case in other applications, then your state 34 00:02:29,340 --> 00:02:32,450 update might be deferred by a few milliseconds. 35 00:02:32,580 --> 00:02:40,350 That means that actually maybe if a user clicks add goals multiple times, the course goals which are currently 36 00:02:40,350 --> 00:02:46,710 rendered on the screen might not be our latest state because not all state updates might have been processed 37 00:02:46,710 --> 00:02:47,540 yet, 38 00:02:47,640 --> 00:02:53,670 therefore there is a better form of updating this, instead of passing our new state data to set course 39 00:02:53,670 --> 00:02:54,200 goals, 40 00:02:54,330 --> 00:03:02,310 you can pass a function to set course goals, a function which receives the latest state, pref course goals 41 00:03:02,580 --> 00:03:08,430 and has to return a new state snapshot and React will then schedule all these function calls and guarantee 42 00:03:08,430 --> 00:03:14,550 you that they are executed in the right order so that even if a state update was deferred, by the time 43 00:03:14,550 --> 00:03:19,210 the update thereafter executes, it guarantees you the first one executed as well 44 00:03:19,440 --> 00:03:24,240 and then here you would simply date for return pref course goals which still is an array 45 00:03:24,320 --> 00:03:30,230 concat new goal. It will yield the same result as before in this app and in this simple app, 46 00:03:30,270 --> 00:03:31,890 this approach would have been fine, 47 00:03:31,890 --> 00:03:37,160 there is basically no chance of React deferring updates so long that 48 00:03:37,260 --> 00:03:43,400 we would end up with an incorrect state but this is the bulletproof approach which will always work. 49 00:03:43,410 --> 00:03:48,630 You only need it if your state update depends on the previous state's data 50 00:03:48,630 --> 00:03:50,010 as this one does, 51 00:03:50,010 --> 00:03:55,860 if your state update is a new data piece which doesn't depend on the previous state, you can always 52 00:03:55,920 --> 00:03:58,800 safely use this non-functional form. 53 00:03:59,110 --> 00:04:04,560 And here, side note, we can of course also shorten this, take advantage of arrow function syntax and 54 00:04:04,560 --> 00:04:09,600 get rid of the return statement and the curly braces since we have only one expression which we immediately 55 00:04:09,600 --> 00:04:10,660 return. 56 00:04:10,710 --> 00:04:16,100 So now with that, it works as before but this is a bit of a safer approach and the recommended approach 57 00:04:16,110 --> 00:04:18,690 if your state update depends on the previous state.