1
00:00:02,520 --> 00:00:10,850
So now we're able to communicate back and we are actually updating our course goals array in the app component

2
00:00:11,030 --> 00:00:17,930
but what you see is despite the array being updated and clearly the new goal is part of the array, our

3
00:00:17,990 --> 00:00:20,190
output here on the screen didn't change

4
00:00:20,270 --> 00:00:30,540
and that leads us to a core concept of React, state. React does not re-render this jsx code and therefore

5
00:00:30,540 --> 00:00:36,300
the real UI, all the time whenever some event is triggered anywhere in the app.

6
00:00:36,300 --> 00:00:40,740
So just because I click this button here does not mean that React will re-render the entire screen

7
00:00:41,100 --> 00:00:44,130
just to make sure it doesn't miss any data change,

8
00:00:44,130 --> 00:00:46,560
this is not how React works,

9
00:00:46,560 --> 00:00:53,010
instead in the end you have to tell React when it should re-render and you do so by using a concept

10
00:00:53,010 --> 00:00:55,770
called state. This course goals array

11
00:00:55,760 --> 00:01:02,280
here is a regular Javascript array, put in other words, React totally ignores it,

12
00:01:02,280 --> 00:01:06,860
we have to tell React that it should not ignore it and that instead,

13
00:01:06,870 --> 00:01:11,140
whenever we change this array, it should update the

14
00:01:11,160 --> 00:01:15,450
UI, the jsx code of the component in which we changed it,

15
00:01:15,480 --> 00:01:18,000
so in this case of the app component.

16
00:01:18,420 --> 00:01:22,450
Now to do that, we import one other thing from the React package

17
00:01:22,470 --> 00:01:30,030
and that's use state, a function built into the React library, a so-called React hook and you'll learn

18
00:01:30,030 --> 00:01:32,430
more about hooks in my React - The Complete Guide

19
00:01:32,430 --> 00:01:39,690
course of course, a function which we can execute inside of functional components and only inside

20
00:01:39,690 --> 00:01:46,170
of functional components, in class-based components, you also have a state management mechanism, not focus

21
00:01:46,170 --> 00:01:52,710
of this course here but you could also do it there but in functional components, you use these hook functions

22
00:01:52,830 --> 00:02:00,570
as they are called, all these functions starting with use at the beginning, to manage state, so to manage

23
00:02:00,570 --> 00:02:07,420
data which when changed should lead to the UI of that component in which you manage the state to

24
00:02:07,420 --> 00:02:08,640
re-render.

25
00:02:08,640 --> 00:02:14,590
So here in the app component, I now want to call use state and to use state,

26
00:02:14,790 --> 00:02:16,670
I pass this array here,

27
00:02:16,800 --> 00:02:18,990
this is my so-called initial state

28
00:02:18,990 --> 00:02:22,260
then, I can get rid of that constant for now.

29
00:02:22,260 --> 00:02:27,750
This tells React that this component has some state and that this is my initial state, by the way

30
00:02:27,750 --> 00:02:32,240
you can also have multiple different state pieces and they're all watched independently

31
00:02:32,370 --> 00:02:38,340
but here I only have one main state and that is my array of goals and I tell React that I have this

32
00:02:38,340 --> 00:02:41,210
state and that this is my initial state.

33
00:02:41,220 --> 00:02:46,920
Now of course I want to get access to that initial state, store it in some constant so that I can use it

34
00:02:46,920 --> 00:02:50,720
in the rest of the component because course goals is now missing everywhere.

35
00:02:50,940 --> 00:02:56,910
So use state also returns something, it returns an array of exactly two elements;

36
00:02:56,910 --> 00:03:01,400
the first element always is our latest state snapshot,

37
00:03:01,530 --> 00:03:04,850
so either our initial state or once we changed it,

38
00:03:04,860 --> 00:03:11,490
the updated state and the second element of that array returned by use state is a function that allows

39
00:03:11,490 --> 00:03:13,460
us to update that state,

40
00:03:13,460 --> 00:03:18,930
replace it with a new value and tell React that it should re-render.

41
00:03:18,930 --> 00:03:26,010
So here I will use array destructuring, by using square brackets on the left side of my equal sign here

42
00:03:26,730 --> 00:03:33,060
to extract these two elements I have in the array returned by use state and there are always exactly

43
00:03:33,060 --> 00:03:37,410
two elements, so it does not depend on which kind of state data you pass here,

44
00:03:37,410 --> 00:03:40,340
use state gives you an array with exactly two elements.

45
00:03:40,470 --> 00:03:42,830
First element, your current state,

46
00:03:42,840 --> 00:03:45,830
so in my case, my array here,

47
00:03:45,900 --> 00:03:48,270
second element, a function to update the state

48
00:03:48,300 --> 00:03:52,820
therefore typically we name this set and then any name of your choice,

49
00:03:52,860 --> 00:03:54,720
set course goals in my case.

50
00:03:55,000 --> 00:04:00,740
So I have two constants created with the help of use state, first constant holds my state snapshot,

51
00:04:00,840 --> 00:04:07,020
second constant actually holds a function which we can call to update that state snapshot and we will

52
00:04:07,020 --> 00:04:12,750
call that function here in add new goal handler. We can call set course goals here

53
00:04:13,140 --> 00:04:17,310
and now I want to update my course goals by adding a new goal.

54
00:04:17,400 --> 00:04:24,210
Now a simple form of doing that is to simply then use my old course goals and call concat here, not

55
00:04:24,210 --> 00:04:29,420
push because push modifies the existing item, instead set course goals

56
00:04:29,460 --> 00:04:35,460
wants a brand new array which will replace the old array and concat will also add an item to an array

57
00:04:35,730 --> 00:04:38,770
but it will return a new array to which this item was added.

58
00:04:38,880 --> 00:04:44,310
So it gives us a brand new array, doesn't touch the old one and we then pass the brand new array to set

59
00:04:44,310 --> 00:04:50,820
course goals and React will then use that brand new array to under the hood replace the old array in

60
00:04:50,820 --> 00:04:54,900
its internally managed state and it will re-render this component

61
00:04:54,900 --> 00:05:01,860
once it did so and therefore update this course goals constant with the new array in the next render

62
00:05:01,860 --> 00:05:08,220
cycle, which in the end means that React will execute this function here and therefore when it does so, it will reflect

63
00:05:08,220 --> 00:05:11,410
that new data in our jsx code.

64
00:05:11,430 --> 00:05:19,980
So here I want to concat my new goal and if we now save this and I click add goal, you see new goals

65
00:05:20,040 --> 00:05:27,600
are added to the list because React now re-renders this screen or the parts that need to be re-rendered

66
00:05:28,110 --> 00:05:30,920
whenever we update our state.

67
00:05:30,930 --> 00:05:35,520
Now how exactly React re-renders and so on is not the focus of this course,

68
00:05:35,550 --> 00:05:40,210
you can learn that in dedicated resources like the official docs or my complete guide,

69
00:05:40,440 --> 00:05:47,310
for now it just suffices to know that React magically and efficiently does re-render the page or the

70
00:05:47,310 --> 00:05:52,140
parts of the page that need re-rendering based on the state changes we applied.