1
00:00:02,310 --> 00:00:03,990
We're done with all the containers,

2
00:00:03,990 --> 00:00:10,380
now let's see which other class-based components we might have. For that, I'll search across my entire project

3
00:00:10,380 --> 00:00:16,080
for a class in a whitespace and I can see that in the burger ingredients we're using a class-based component.

4
00:00:16,140 --> 00:00:22,760
So let's change this to burger ingredient which receives props and return some JSX,

5
00:00:23,040 --> 00:00:29,260
get rid of the render method of closing curly brace and adjust the name here

6
00:00:29,260 --> 00:00:31,990
and previously I convert this because of prop types.

7
00:00:31,990 --> 00:00:35,480
Now you can use prop types on functional components too,

8
00:00:35,530 --> 00:00:41,020
I wanted to re-differentiate between components that use prop types and not, hence I use the class-based

9
00:00:41,020 --> 00:00:46,390
component here before but since it's not needed and I only want to use functional components here, we

10
00:00:46,390 --> 00:00:49,700
can simply convert the burger ingredient here without issues.

11
00:00:49,870 --> 00:00:55,150
Of course you should now make sure that you don't use this props in here but just props.

12
00:00:55,150 --> 00:00:58,330
So if you now save that, this looks good, 

13
00:00:58,440 --> 00:01:01,780
I can see my burger builder and the ingredients again.

14
00:01:01,860 --> 00:01:05,220
Now we always have a class-based component in the order summary,

15
00:01:05,220 --> 00:01:10,080
so here I'll also convert this to a functional component,

16
00:01:10,200 --> 00:01:14,670
remove the render method here and the closing curly brace,

17
00:01:14,670 --> 00:01:17,810
change the name here to order summary with a lowercase o

18
00:01:18,750 --> 00:01:25,860
and in there, all the places where you use this props should be selected and changed to just props

19
00:01:25,860 --> 00:01:28,280
otherwise it of course won't work

20
00:01:29,650 --> 00:01:36,130
but with that, we should be good here and we can get rid of that component import here of course,

21
00:01:36,130 --> 00:01:42,050
also in that other component we just changed in the burger ingredient and let's see if the order summary

22
00:01:42,100 --> 00:01:43,860
still works in our modal.

23
00:01:43,870 --> 00:01:44,920
If I do log in

24
00:01:49,550 --> 00:01:54,250
and I do build my burger, order now, here's the summary,

25
00:01:54,470 --> 00:01:55,760
continue,

26
00:01:55,760 --> 00:01:58,990
that all still seems to work to me.

27
00:01:59,030 --> 00:02:03,790
Now last but not least, the modal component here also is a class-based component.

28
00:02:03,830 --> 00:02:09,650
So here I'll also convert that to a functional component and there I use a class-based component

29
00:02:09,650 --> 00:02:12,720
because we have shouldComponentUpdate in here.

30
00:02:12,800 --> 00:02:18,620
Now first of all, let's get rid of the render method and shouldComponentUpdate will now not work anymore,

31
00:02:18,620 --> 00:02:20,290
so let's comment it out.

32
00:02:20,300 --> 00:02:28,100
Still I want to optimize performance and we can do this with first of all renaming this and then by

33
00:02:28,100 --> 00:02:36,830
wrapping it React.memo. React.memo allows us to optimize performance and only update this when the props

34
00:02:36,830 --> 00:02:38,870
of this component change.

35
00:02:38,870 --> 00:02:46,200
Now previously I had logic here where I only compared show and children. Now in here,

36
00:02:46,280 --> 00:02:51,870
you by the way should also rename all or change all this props calls to just props

37
00:02:52,370 --> 00:02:57,570
and what I want to show you is that previously, we also had modal closed as a prop and

38
00:02:57,680 --> 00:03:04,780
I'm not checking that here and if you want to not check all props you are getting but as we did it before

39
00:03:04,790 --> 00:03:10,580
here, only check a certain set because you know that other prop will never change so I definitely don't

40
00:03:10,580 --> 00:03:11,760
need to check it,

41
00:03:12,020 --> 00:03:14,670
then you can also do this with React.memo.

42
00:03:14,680 --> 00:03:19,740
There you can pass in a second argument where you can add your own comparison function.

43
00:03:20,150 --> 00:03:28,520
This function receives the previous props and the next props and then you return true or false to decide

44
00:03:28,850 --> 00:03:31,580
whether the props are equal or not

45
00:03:31,580 --> 00:03:34,690
and that is the opposite logic than we used up here.

46
00:03:34,910 --> 00:03:39,510
So we can generally copy that comparison up there and add it here

47
00:03:39,950 --> 00:03:48,750
but first of all, this props down there has to be changed to previous props and besides that, we have

48
00:03:48,750 --> 00:03:52,850
to invert the logic because we have to return the opposite result.

49
00:03:52,860 --> 00:03:57,900
Previously we checked whether we want to continue with the update or not and we only wanted to continue

50
00:03:57,900 --> 00:04:01,160
when props are not equal, here in this function

51
00:04:01,170 --> 00:04:03,660
we now need to return if they are equal.

52
00:04:03,810 --> 00:04:06,890
So I'm checking for equality here and here

53
00:04:07,080 --> 00:04:09,780
and of course instead of or, we now need an and

54
00:04:09,780 --> 00:04:14,010
sign here and now with that, we have an optimized modal again.

55
00:04:14,310 --> 00:04:17,800
So this should all still work, if we tried to order,

56
00:04:17,910 --> 00:04:23,820
we can still see that modal here and that modal will now actually also be optimized with the help

57
00:04:23,820 --> 00:04:28,450
of React.memo and therefore, it is a functional component without any problems.