We're done with all the containers,
now let's see which other class-based components we might have. For that, I'll search across my entire project
for a class in a whitespace and I can see that in the burger ingredients we're using a class-based component.
So let's change this to burger ingredient which receives props and return some JSX,
get rid of the render method of closing curly brace and adjust the name here
and previously I convert this because of prop types.
Now you can use prop types on functional components too,
I wanted to re-differentiate between components that use prop types and not, hence I use the class-based
component here before but since it's not needed and I only want to use functional components here, we
can simply convert the burger ingredient here without issues.
Of course you should now make sure that you don't use this props in here but just props.
So if you now save that, this looks good,
I can see my burger builder and the ingredients again.
Now we always have a class-based component in the order summary,
so here I'll also convert this to a functional component,
remove the render method here and the closing curly brace,
change the name here to order summary with a lowercase o
and in there, all the places where you use this props should be selected and changed to just props
otherwise it of course won't work
but with that, we should be good here and we can get rid of that component import here of course,
also in that other component we just changed in the burger ingredient and let's see if the order summary
still works in our modal.
If I do log in
and I do build my burger, order now, here's the summary,
continue,
that all still seems to work to me.
Now last but not least, the modal component here also is a class-based component.
So here I'll also convert that to a functional component and there I use a class-based component
because we have shouldComponentUpdate in here.
Now first of all, let's get rid of the render method and shouldComponentUpdate will now not work anymore,
so let's comment it out.
Still I want to optimize performance and we can do this with first of all renaming this and then by
wrapping it React.memo. React.memo allows us to optimize performance and only update this when the props
of this component change.
Now previously I had logic here where I only compared show and children. Now in here,
you by the way should also rename all or change all this props calls to just props
and what I want to show you is that previously, we also had modal closed as a prop and
I'm not checking that here and if you want to not check all props you are getting but as we did it before
here, only check a certain set because you know that other prop will never change so I definitely don't
need to check it,
then you can also do this with React.memo.
There you can pass in a second argument where you can add your own comparison function.
This function receives the previous props and the next props and then you return true or false to decide
whether the props are equal or not
and that is the opposite logic than we used up here.
So we can generally copy that comparison up there and add it here
but first of all, this props down there has to be changed to previous props and besides that, we have
to invert the logic because we have to return the opposite result.
Previously we checked whether we want to continue with the update or not and we only wanted to continue
when props are not equal, here in this function
we now need to return if they are equal.
So I'm checking for equality here and here
and of course instead of or, we now need an and
sign here and now with that, we have an optimized modal again.
So this should all still work, if we tried to order,
we can still see that modal here and that modal will now actually also be optimized with the help
of React.memo and therefore, it is a functional component without any problems.