1 00:00:01,140 --> 00:00:02,700 ‫Let's quickly summarize 2 00:00:02,700 --> 00:00:05,670 ‫everything that we know about the useState Hook 3 00:00:05,670 --> 00:00:07,710 ‫in one single slide 4 00:00:07,710 --> 00:00:10,653 ‫so that you can keep it as a handy reference. 5 00:00:12,720 --> 00:00:17,100 ‫So we use the useState Hook to first create state 6 00:00:17,100 --> 00:00:18,810 ‫and then the set a function 7 00:00:18,810 --> 00:00:23,043 ‫that results from creating state to update state. 8 00:00:23,880 --> 00:00:27,870 ‫Now, we can create a state variable in the simple way 9 00:00:27,870 --> 00:00:30,600 ‫which is what we do most of the time 10 00:00:30,600 --> 00:00:34,983 ‫but we can also create state based on a callback function. 11 00:00:35,850 --> 00:00:40,650 ‫So whenever the initial state depends on some computation 12 00:00:40,650 --> 00:00:43,800 ‫for example, reading data from local storage, 13 00:00:43,800 --> 00:00:47,040 ‫we can pass in a callback function like this 14 00:00:47,040 --> 00:00:50,190 ‫instead of just a single value, 15 00:00:50,190 --> 00:00:54,363 ‫and this process is sometimes called lazy evaluation. 16 00:00:55,200 --> 00:00:56,880 ‫Now this callback function 17 00:00:56,880 --> 00:01:01,170 ‫is only called on the initial render of the component 18 00:01:01,170 --> 00:01:05,970 ‫so on subsequent re-renders it will simply be ignored. 19 00:01:05,970 --> 00:01:10,290 ‫Also, this callback needs to fulfill two requirements. 20 00:01:10,290 --> 00:01:13,140 ‫First, it must be a pure function, 21 00:01:13,140 --> 00:01:18,120 ‫and second it should require no arguments in order to work. 22 00:01:18,120 --> 00:01:19,860 ‫And that's actually it, 23 00:01:19,860 --> 00:01:23,433 ‫that's how we create state variables using useState. 24 00:01:24,450 --> 00:01:27,150 ‫And now about updating state, 25 00:01:27,150 --> 00:01:30,570 ‫we can again update state in a simple way 26 00:01:30,570 --> 00:01:33,060 ‫just by passing a single value 27 00:01:33,060 --> 00:01:37,650 ‫into the returned setter function as the next state. 28 00:01:37,650 --> 00:01:42,420 ‫So in this example the next state would be 1000. 29 00:01:42,420 --> 00:01:45,120 ‫On the other hand, in many situations 30 00:01:45,120 --> 00:01:49,800 ‫we actually want to update state based on the current state 31 00:01:49,800 --> 00:01:53,670 ‫for example, increasing a counter by one. 32 00:01:53,670 --> 00:01:57,690 ‫So if that's the case we can give the setter function 33 00:01:57,690 --> 00:02:00,210 ‫a callback function like this, 34 00:02:00,210 --> 00:02:04,590 ‫so a function that is pure and returns the next state 35 00:02:04,590 --> 00:02:07,140 ‫based on the current state. 36 00:02:07,140 --> 00:02:09,330 ‫And this is, in my opinion, 37 00:02:09,330 --> 00:02:14,330 ‫the preferred way of updating state whenever it makes sense. 38 00:02:14,490 --> 00:02:18,810 ‫Now, one important rule to keep in mind about updating state 39 00:02:18,810 --> 00:02:23,490 ‫is that you should never mutate objects or arrays. 40 00:02:23,490 --> 00:02:27,840 ‫Instead, you must create a new object or a new array 41 00:02:27,840 --> 00:02:31,110 ‫which incorporates the changes that you want to make 42 00:02:31,110 --> 00:02:35,610 ‫and then pass that new object into the setter function. 43 00:02:35,610 --> 00:02:38,340 ‫And we have done that multiple times already, 44 00:02:38,340 --> 00:02:39,990 ‫but I just wanted to mention this 45 00:02:39,990 --> 00:02:42,753 ‫here in the summary lecture as well. 46 00:02:43,680 --> 00:02:46,290 ‫Okay, so in conclusion, 47 00:02:46,290 --> 00:02:49,860 ‫both for creating and for updating state 48 00:02:49,860 --> 00:02:52,260 ‫we have both a simple way 49 00:02:52,260 --> 00:02:56,190 ‫and a way that requires a callback function 50 00:02:56,190 --> 00:02:58,620 ‫so this can be a little bit confusing, 51 00:02:58,620 --> 00:03:02,520 ‫which is why I decided to create this overview. 52 00:03:02,520 --> 00:03:06,030 ‫So I hope that this makes everything crystal clear 53 00:03:06,030 --> 00:03:09,330 ‫and that you have now mastered the useState Hook 54 00:03:09,330 --> 00:03:10,653 ‫once and for all.