1
00:00:01,290 --> 00:00:04,740
‫Now before we really dive into class components,

2
00:00:04,740 --> 00:00:06,990
‫it's a good idea to get familiar

3
00:00:06,990 --> 00:00:08,640
‫with all the main differences

4
00:00:08,640 --> 00:00:12,063
‫between function components and class components.

5
00:00:13,380 --> 00:00:15,270
‫So, as we already know,

6
00:00:15,270 --> 00:00:17,670
‫function components are the current way

7
00:00:17,670 --> 00:00:20,220
‫of creating components in React,

8
00:00:20,220 --> 00:00:23,437
‫as they were introduced into React in 2019

9
00:00:27,600 --> 00:00:29,790
‫Class components, on the other hand,

10
00:00:29,790 --> 00:00:32,730
‫have been around for a long time,

11
00:00:32,730 --> 00:00:37,730
‫so since version 0.13 back in 2015.

12
00:00:37,830 --> 00:00:42,090
‫Now, technically React has always had function components

13
00:00:42,090 --> 00:00:43,920
‫but without hooks.

14
00:00:43,920 --> 00:00:46,320
‫So before 16.8,

15
00:00:46,320 --> 00:00:50,730
‫function components were very limited and not really useful,

16
00:00:50,730 --> 00:00:54,510
‫because they couldn't even have their own state.

17
00:00:54,510 --> 00:00:57,540
‫Now, in order to create a function component,

18
00:00:57,540 --> 00:01:00,930
‫we just use any type of JavaScript function,

19
00:01:00,930 --> 00:01:05,490
‫no matter if a function declaration or an arrow function.

20
00:01:05,490 --> 00:01:06,930
‫With class components,

21
00:01:06,930 --> 00:01:10,680
‫as the name says, we have to create an ES6 class

22
00:01:10,680 --> 00:01:15,480
‫that extends the provided React.Component parent class,

23
00:01:15,480 --> 00:01:19,470
‫so just like we did in the previous two lecturers.

24
00:01:19,470 --> 00:01:21,810
‫So when we're using class components,

25
00:01:21,810 --> 00:01:25,830
‫we're actually using object-oriented programming principles

26
00:01:25,830 --> 00:01:28,110
‫like having to use the this keyword

27
00:01:28,110 --> 00:01:32,700
‫to read incoming props and to define local component state,

28
00:01:32,700 --> 00:01:36,330
‫which can become a bit annoying over time.

29
00:01:36,330 --> 00:01:38,880
‫With function components on the other hand,

30
00:01:38,880 --> 00:01:42,060
‫these things are much easier.

31
00:01:42,060 --> 00:01:43,560
‫So to read props,

32
00:01:43,560 --> 00:01:47,400
‫all we have to do is to use the received props object.

33
00:01:47,400 --> 00:01:49,290
‫And to define local state,

34
00:01:49,290 --> 00:01:52,050
‫we can use the useState hook.

35
00:01:52,050 --> 00:01:54,240
‫But probably the biggest difference

36
00:01:54,240 --> 00:01:57,000
‫between these two types of components

37
00:01:57,000 --> 00:02:01,650
‫is how they handle side effects and the component lifecycle.

38
00:02:01,650 --> 00:02:03,570
‫So in class components,

39
00:02:03,570 --> 00:02:05,730
‫we actually have special methods

40
00:02:05,730 --> 00:02:07,770
‫that were defined by React

41
00:02:07,770 --> 00:02:12,030
‫in order to run code at different points of the lifecycle.

42
00:02:12,030 --> 00:02:14,970
‫And so these are called Lifecycle methods,

43
00:02:14,970 --> 00:02:15,930
‫and we will look

44
00:02:15,930 --> 00:02:19,680
‫at the most important ones throughout this section.

45
00:02:19,680 --> 00:02:21,420
‫Now, with function components,

46
00:02:21,420 --> 00:02:24,840
‫we now care a lot more about synchronization

47
00:02:24,840 --> 00:02:27,840
‫rather than the component lifecycle.

48
00:02:27,840 --> 00:02:31,860
‫And we do so by using the useEffect hook.

49
00:02:31,860 --> 00:02:35,880
‫I mean, we know that this synchronization with useEffect

50
00:02:35,880 --> 00:02:39,960
‫still kind of translates into the component lifecycle,

51
00:02:39,960 --> 00:02:43,440
‫but the focus is more on synchronizing the component

52
00:02:43,440 --> 00:02:44,973
‫with a side effect.

53
00:02:45,840 --> 00:02:48,870
‫And, actually, I think it's safe to say

54
00:02:48,870 --> 00:02:53,520
‫that hooks in general are the big and the main difference

55
00:02:53,520 --> 00:02:56,910
‫between function and class components.

56
00:02:56,910 --> 00:03:01,590
‫Hooks just introduced a completely new way of thinking

57
00:03:01,590 --> 00:03:04,890
‫and of writing React applications.

58
00:03:04,890 --> 00:03:07,830
‫So the day that hooks were introduced,

59
00:03:07,830 --> 00:03:11,160
‫React development really changed forever.

60
00:03:11,160 --> 00:03:15,993
‫And if you ask me, it actually changed for a lot better.

61
00:03:17,010 --> 00:03:21,450
‫But anyway, some smaller differences are in event handlers

62
00:03:21,450 --> 00:03:25,020
‫and in the way in which we return the JSX

63
00:03:25,020 --> 00:03:27,450
‫from our components.

64
00:03:27,450 --> 00:03:29,220
‫So in function components,

65
00:03:29,220 --> 00:03:31,980
‫we simply handle events with functions

66
00:03:31,980 --> 00:03:35,820
‫that we define inside the component function body.

67
00:03:35,820 --> 00:03:37,470
‫While in class components,

68
00:03:37,470 --> 00:03:40,170
‫we have to create a new class method

69
00:03:40,170 --> 00:03:42,243
‫for every single event handler.

70
00:03:43,170 --> 00:03:45,300
‫Now as for the JSX,

71
00:03:45,300 --> 00:03:46,560
‫in function components,

72
00:03:46,560 --> 00:03:50,100
‫we return our JSX from the function,

73
00:03:50,100 --> 00:03:51,780
‫while in class components,

74
00:03:51,780 --> 00:03:56,010
‫we need to return JSX from a special render method,

75
00:03:56,010 --> 00:03:58,800
‫which is yet another React-specific thing

76
00:03:58,800 --> 00:04:00,240
‫that you need to remember

77
00:04:00,240 --> 00:04:03,330
‫when you work with class components.

78
00:04:03,330 --> 00:04:04,620
‫So, in general,

79
00:04:04,620 --> 00:04:06,480
‫function components with hooks

80
00:04:06,480 --> 00:04:10,860
‫have a lot of advantages over class components.

81
00:04:10,860 --> 00:04:12,450
‫They are easier to build,

82
00:04:12,450 --> 00:04:13,710
‫because they require

83
00:04:13,710 --> 00:04:17,430
‫a lot less React-specific boilerplate code,

84
00:04:17,430 --> 00:04:20,700
‫and they produce much cleaner code.

85
00:04:20,700 --> 00:04:23,880
‫And the main reason for this cleaner code

86
00:04:23,880 --> 00:04:25,650
‫is that the useEffect hook

87
00:04:25,650 --> 00:04:29,220
‫combines all code related to the lifecycle

88
00:04:29,220 --> 00:04:31,080
‫in one single place.

89
00:04:31,080 --> 00:04:32,790
‫While in class components,

90
00:04:32,790 --> 00:04:34,740
‫that code is usually spread

91
00:04:34,740 --> 00:04:37,380
‫across multiple lifecycle methods,

92
00:04:37,380 --> 00:04:41,013
‫which can become quite confusing in large components.

93
00:04:41,970 --> 00:04:43,680
‫Now, one of the big reasons

94
00:04:43,680 --> 00:04:46,530
‫why hooks were introduced in the first place

95
00:04:46,530 --> 00:04:48,720
‫is that they make it much easier

96
00:04:48,720 --> 00:04:53,720
‫to share stateful logic simply by creating custom hooks.

97
00:04:54,060 --> 00:04:56,880
‫And, finally, in function components,

98
00:04:56,880 --> 00:05:01,710
‫we can get rid of the annoying and error-prone this keyword,

99
00:05:01,710 --> 00:05:05,970
‫which was especially hard to grasp for many beginners.

100
00:05:05,970 --> 00:05:10,050
‫The only advantage, I would say, that class components have

101
00:05:10,050 --> 00:05:12,960
‫is the fact that some people find it easier

102
00:05:12,960 --> 00:05:16,050
‫to understand the component life cycle

103
00:05:16,050 --> 00:05:18,000
‫because of lifecycle methods

104
00:05:18,000 --> 00:05:22,020
‫with explicit names such as componentDidMount

105
00:05:22,020 --> 00:05:23,220
‫or componentWillUnmount.

106
00:05:25,329 --> 00:05:28,770
‫Okay, and with this pretty detailed comparison,

107
00:05:28,770 --> 00:05:31,380
‫I think we're now ready to dive deep

108
00:05:31,380 --> 00:05:34,533
‫into how class components work in practice.