1
00:00:00,130 --> 00:00:00,790
OK.

2
00:00:00,810 --> 00:00:07,320
Once we have learned what are the class based components there's probably a ten thousand dollar question

3
00:00:07,320 --> 00:00:08,760
that you already ask.

4
00:00:09,060 --> 00:00:15,320
Well which component should I use and my most simplest answer would be like this.

5
00:00:15,420 --> 00:00:20,970
You see as you're noticing and react as you saw already with using let's say arrow functions whether

6
00:00:20,970 --> 00:00:26,850
that would be implicit or explicit return which by the way would be javascript thing but still I'm including

7
00:00:26,850 --> 00:00:32,790
this and react as well as as you are looking at the imports and exports as we're looking right now at

8
00:00:32,790 --> 00:00:34,200
the components.

9
00:00:34,340 --> 00:00:37,830
There's a simple answer and it's called preference.

10
00:00:37,830 --> 00:00:43,380
I have seen where people use everything with the class based component because you can do pretty much

11
00:00:43,440 --> 00:00:48,410
everything that you're doing already with functional but you can also add your state.

12
00:00:48,510 --> 00:00:54,150
I have seen where people are using the functional components wherever they want meaning whenever they

13
00:00:54,150 --> 00:00:59,820
don't want the state or the lifecycle methods because they prefer the actual syntax they say that you

14
00:00:59,820 --> 00:01:05,700
know what I like how this looks much simpler than dealing with the class and in general there should

15
00:01:05,700 --> 00:01:12,480
be a performance benefit that they react as promised but at the moment to tell you honestly I am not

16
00:01:12,480 --> 00:01:18,270
aware of them and this is gonna be the case where this is really up to you if you like the Functional

17
00:01:18,270 --> 00:01:23,520
Component use them all over the place and then whenever you need a state you're just going to have to

18
00:01:23,520 --> 00:01:25,570
be creating the class component.

19
00:01:25,570 --> 00:01:30,300
However I do want to warn you that if you're going this route there's going to be a times when you already

20
00:01:30,300 --> 00:01:35,970
finish your component you're like oh shoot I do need my state and then you're going to have to refactor

21
00:01:35,970 --> 00:01:36,740
it for me.

22
00:01:36,840 --> 00:01:41,610
If you're going to be using hooks by the way again not just as a side note that I need to add that if

23
00:01:41,610 --> 00:01:46,890
you're going to be using Hooks you're going to be doing probably a functional component anyway and then

24
00:01:46,890 --> 00:01:49,090
you're gonna be setting it up if you need it.

25
00:01:49,110 --> 00:01:54,690
So I do need to add it but we're going to be focusing on these two options either the class based or

26
00:01:54,690 --> 00:02:01,170
the functional component and that might be a sometimes a pain where you need to refactor everything

27
00:02:01,170 --> 00:02:04,080
from the functional to a actual class based.

28
00:02:04,440 --> 00:02:09,750
So from the other side the easiest one would be doing everything with the class based components because

29
00:02:09,750 --> 00:02:15,100
then you don't need to worry about anything you know that if you want state I'm gonna have a state.

30
00:02:15,270 --> 00:02:18,530
If you just want a simple return your is gonna get a simpler.

31
00:02:18,630 --> 00:02:21,900
Now in this course again I'm going to be switching back and forth.

32
00:02:22,050 --> 00:02:27,330
There's gonna be some cases where we're just creating a class based component even though we don't need

33
00:02:27,330 --> 00:02:28,110
to.

34
00:02:28,110 --> 00:02:32,790
There's gonna be cases where if I know that there's not going to be a state I will gonna be having this

35
00:02:32,850 --> 00:02:37,620
as a functional component when I refer back to the simple fact of preference.

36
00:02:37,800 --> 00:02:43,110
If you have a different preference if you think that well I don't want this to be a class based component

37
00:02:43,560 --> 00:02:46,440
just make it a functional it is really up to you.

38
00:02:46,500 --> 00:02:52,560
Again I don't think that in general this is going to matter whatever choice you're choosing the moment

39
00:02:52,560 --> 00:02:54,180
where there's performance benefits.

40
00:02:54,180 --> 00:02:57,830
Sure but at the moment we all have our preferences.

41
00:02:57,870 --> 00:03:01,160
So some people like the syntax simpler like this.

42
00:03:01,260 --> 00:03:06,390
Some people think that classes are good enough and they don't want to refactor it so that would be the

43
00:03:06,390 --> 00:03:10,860
simpler stanzas that I can give you of which component you should choose.

44
00:03:10,860 --> 00:03:17,010
Of course if you're gonna be working with functional component and you do need to state as well as you

45
00:03:17,010 --> 00:03:22,000
need to lifecycle methods you will going to have to reach for a class based component or react.

46
00:03:22,350 --> 00:03:23,440
There is no other choice.

47
00:03:23,730 --> 00:03:28,050
However if you don't need it then again this is just gonna be your preference.