1
00:00:01,050 --> 00:00:04,530
‫So now that we already know what props are

2
00:00:04,530 --> 00:00:08,190
‫and how we use them in practice, let's quickly review them

3
00:00:08,190 --> 00:00:12,453
‫and even learn some important additional things about props.

4
00:00:14,700 --> 00:00:19,410
‫So as we just learned, we use props in React to pass data

5
00:00:19,410 --> 00:00:22,770
‫from parent components to child components.

6
00:00:22,770 --> 00:00:27,510
‫So essentially to pass information down the component tree.

7
00:00:27,510 --> 00:00:31,620
‫This means that essentially we use props to communicate

8
00:00:31,620 --> 00:00:34,920
‫between parent and child components.

9
00:00:34,920 --> 00:00:38,580
‫Therefore, props are an essential React tool

10
00:00:38,580 --> 00:00:43,200
‫to configure and also to customize components.

11
00:00:43,200 --> 00:00:46,230
‫So we can imagine props as settings that we

12
00:00:46,230 --> 00:00:49,860
‫can use to make a parent component control how

13
00:00:49,860 --> 00:00:54,120
‫its child component should look like and how it should work.

14
00:00:54,120 --> 00:00:56,820
‫So in that regard, props are just

15
00:00:56,820 --> 00:01:00,898
‫like arguments passed to regular JavaScript functions.

16
00:01:00,898 --> 00:01:05,898
‫Also, we can pass anything into JavaScript functions, right?

17
00:01:06,150 --> 00:01:10,260
‫And so the same is actually true for props.

18
00:01:10,260 --> 00:01:14,010
‫So we can pass any type of value as a prop.

19
00:01:14,010 --> 00:01:18,570
‫So we can pass single values, array objects, functions

20
00:01:18,570 --> 00:01:21,930
‫and even other React components, which is a really

21
00:01:21,930 --> 00:01:25,113
‫powerful technique that we will explore a bit later.

22
00:01:26,040 --> 00:01:29,700
‫So those are the fundamentals of props in React

23
00:01:29,700 --> 00:01:33,475
‫but now let's go dig a little bit deeper.

24
00:01:33,475 --> 00:01:38,343
‫But before we do that, we need to first take a step back.

25
00:01:39,180 --> 00:01:42,660
‫So at this point of the course, we have already learned

26
00:01:42,660 --> 00:01:46,320
‫about the components appearance and its logic,

27
00:01:46,320 --> 00:01:48,540
‫so by writing both JSX

28
00:01:48,540 --> 00:01:51,303
‫and JavaScript logic inside components.

29
00:01:52,140 --> 00:01:54,630
‫Now, I've also been saying since the beginning

30
00:01:54,630 --> 00:01:57,758
‫of the course that React renders a component based

31
00:01:57,758 --> 00:02:02,758
‫on its current data and that UI will always be kept in sync

32
00:02:02,970 --> 00:02:05,520
‫with that data, right?

33
00:02:05,520 --> 00:02:08,460
‫But now it's time to get a bit more specific

34
00:02:08,460 --> 00:02:12,390
‫about what that data actually is.

35
00:02:12,390 --> 00:02:16,671
‫So this data that React users to render a component is made

36
00:02:16,671 --> 00:02:19,771
‫out of props and state

37
00:02:19,771 --> 00:02:22,953
‫and actually there are even more types of data

38
00:02:22,953 --> 00:02:27,480
‫but what matters for now are props and state.

39
00:02:27,480 --> 00:02:31,350
‫Now, state is basically internal component data

40
00:02:31,350 --> 00:02:34,470
‫that can be updated by the component's logic,

41
00:02:34,470 --> 00:02:38,190
‫so by the component itself, while props

42
00:02:38,190 --> 00:02:40,920
‫on the other hand is data that is coming

43
00:02:40,920 --> 00:02:42,570
‫from the parent component,

44
00:02:42,570 --> 00:02:45,123
‫so from the outside basically.

45
00:02:46,020 --> 00:02:49,470
‫So it's the parent component who owns that data

46
00:02:49,470 --> 00:02:52,230
‫and so therefore it cannot be modified

47
00:02:52,230 --> 00:02:53,940
‫by the child component.

48
00:02:53,940 --> 00:02:56,820
‫Instead, props can only be updated

49
00:02:56,820 --> 00:02:59,040
‫by the parent component itself.

50
00:02:59,040 --> 00:03:02,190
‫And this brings us to one of the few strict rules

51
00:03:02,190 --> 00:03:06,690
‫that React gives us, which is that props are immutable.

52
00:03:06,690 --> 00:03:10,440
‫So they cannot be changed, they are read-only.

53
00:03:10,440 --> 00:03:14,790
‫And if at any point you feel like you need to mutate props

54
00:03:14,790 --> 00:03:17,550
‫actually what you need is state

55
00:03:17,550 --> 00:03:20,795
‫because state is for data that changes over time

56
00:03:20,795 --> 00:03:23,520
‫as we will learn soon.

57
00:03:23,520 --> 00:03:25,530
‫But why is that actually?

58
00:03:25,530 --> 00:03:28,890
‫Why are props immutable in React?

59
00:03:28,890 --> 00:03:32,004
‫Well, to start, props are just an object.

60
00:03:32,004 --> 00:03:36,521
‫Therefore, if you change the props object in your component

61
00:03:36,521 --> 00:03:39,262
‫you would also affect the parent component

62
00:03:39,262 --> 00:03:43,590
‫because that's just how objects work in JavaScript.

63
00:03:43,590 --> 00:03:46,620
‫So when you copy an object and mutate the copy,

64
00:03:46,620 --> 00:03:50,250
‫the original object will also be mutated.

65
00:03:50,250 --> 00:03:53,100
‫Now, if you change an object that is located

66
00:03:53,100 --> 00:03:55,240
‫outside of the component function,

67
00:03:55,240 --> 00:03:59,981
‫that function has then created a so-called side effect.

68
00:03:59,981 --> 00:04:01,530
‫So in general,

69
00:04:01,530 --> 00:04:04,230
‫a side effect happens whenever you change some

70
00:04:04,230 --> 00:04:08,610
‫data that's located outside of the current function.

71
00:04:08,610 --> 00:04:12,360
‫React, however, is all about pure functions,

72
00:04:12,360 --> 00:04:15,090
‫so functions without side effects,

73
00:04:15,090 --> 00:04:18,420
‫at least when it's about a components data.

74
00:04:18,420 --> 00:04:21,690
‫So components have to be pure in terms of their

75
00:04:21,690 --> 00:04:24,930
‫props and state, because this allows React to

76
00:04:24,930 --> 00:04:28,410
‫optimize your application and it avoids some strange

77
00:04:28,410 --> 00:04:32,880
‫bugs that can appear when you manipulate external data.

78
00:04:32,880 --> 00:04:36,208
‫And in fact, we can extend this idea of immutability

79
00:04:36,208 --> 00:04:39,330
‫to React development in general.

80
00:04:39,330 --> 00:04:43,050
‫So a component should never mutate any data that

81
00:04:43,050 --> 00:04:45,930
‫we write outside of its function scope

82
00:04:45,930 --> 00:04:47,763
‫like in this example here.

83
00:04:49,965 --> 00:04:52,500
‫And now to finish, it's important to understand

84
00:04:52,500 --> 00:04:56,722
‫that React uses a so-called one-way data flow.

85
00:04:56,722 --> 00:05:00,240
‫Now, what does that have to do with props?

86
00:05:00,240 --> 00:05:03,827
‫Well, in simple terms, one-way data flow means that

87
00:05:03,827 --> 00:05:08,507
‫in React applications, data can only be passed from parent

88
00:05:08,507 --> 00:05:13,507
‫to child components, which happens by using props.

89
00:05:13,680 --> 00:05:18,240
‫So in other words, data can flow from parents to children

90
00:05:18,240 --> 00:05:20,550
‫but never the opposite way.

91
00:05:20,550 --> 00:05:25,550
‫And therefore we have a one way data flow, so only from top

92
00:05:25,710 --> 00:05:27,903
‫to bottom of the component tree.

93
00:05:28,770 --> 00:05:31,410
‫Now, this may sound obvious to you,

94
00:05:31,410 --> 00:05:35,340
‫but other frameworks such as Angular actually employ

95
00:05:35,340 --> 00:05:37,560
‫a two-way data flow.

96
00:05:37,560 --> 00:05:40,500
‫So if you know one of those frameworks already

97
00:05:40,500 --> 00:05:43,320
‫this might be quite a change for you.

98
00:05:43,320 --> 00:05:47,460
‫But there is actually a reason or multiple reasons why

99
00:05:47,460 --> 00:05:51,120
‫React uses a one way data flow like this.

100
00:05:51,120 --> 00:05:53,790
‫The first is that it makes applications way

101
00:05:53,790 --> 00:05:56,820
‫more predictable and way easier to understand

102
00:05:56,820 --> 00:06:00,450
‫for developers because it is just a lot easier

103
00:06:00,450 --> 00:06:03,120
‫to understand where the data is coming from

104
00:06:03,120 --> 00:06:06,090
‫if it only flows in one direction.

105
00:06:06,090 --> 00:06:07,320
‫In a similar vein,

106
00:06:07,320 --> 00:06:10,440
‫it makes applications way easier to debug,

107
00:06:10,440 --> 00:06:14,010
‫again because we have way more control over the data

108
00:06:14,010 --> 00:06:18,450
‫and we understand exactly how that data flows around.

109
00:06:18,450 --> 00:06:22,830
‫And finally, two-way data binding is usually less efficient

110
00:06:22,830 --> 00:06:26,190
‫so it's less performant to implement.

111
00:06:26,190 --> 00:06:30,457
‫Okay, so that sounds great, but you might be wondering,

112
00:06:30,457 --> 00:06:34,260
‫"What if I actually wanted to pass some data, for example

113
00:06:34,260 --> 00:06:37,826
‫some state, up to a parent component?"

114
00:06:37,826 --> 00:06:41,850
‫Well, there is actually a very clever way to do that

115
00:06:41,850 --> 00:06:45,570
‫but as so often we will learn about that a bit later.

116
00:06:45,570 --> 00:06:48,690
‫And actually in the next section, to be specific,

117
00:06:48,690 --> 00:06:50,608
‫so it's not far away.

118
00:06:50,608 --> 00:06:53,430
‫There are just so many moving pieces

119
00:06:53,430 --> 00:06:56,190
‫in learning a whole library like React,

120
00:06:56,190 --> 00:06:59,580
‫that of course you can't learn it all at once,

121
00:06:59,580 --> 00:07:01,590
‫but trust me, you will get there

122
00:07:01,590 --> 00:07:05,673
‫and then everything will fall nicely into place at the end.