Higher-Order Component Pattern

[00:00:00]
>> Well then, we go to the next pattern, which is the higher-order component pattern. So, a higher-order component makes it really easy to pass logic to other components by wrapping them. For example, like this component, we have like a title component and we wrap that in with large font size, so it makes it big and then with bold font weight to make the font weight bigger or bolder.

[00:00:25]
Now, essentially what a higher order component does is it gets that components that it wraps and it automatically adds other props to that component which it then returns. So for example here we have a with styles, higher-order components and you see here that we're we create a style object that has like the color red and then font size 1em.

[00:00:48]
And then also we're merging props like in case the component that we're wrapping already had the style prop, you wanna make sure that we don't overwrite that. And then we've returned that components with a new style, so this is pretty useful, I also see that it's overflowing here a bit.

[00:01:03]
But for example we just have a text component that just has like the font family enter nothing else. But then we can make a new component really easily which is the, or by wrapping it with the with styles, higher-order components. So again, we have the separation of concerns, we said before, cuz we have components that just care about adding that data.

[00:01:23]
And yeah, I guess the only downside and although I already showed that before is that it can easily end up in naming collisions and you may not always know that. So for in this case we add the style prop to the element that we're wrapping, but maybe if we didn't merge the props here.

[00:01:47]
So we just added like the padding and the margin and it's component already had the style it would overwrite that. And in some cases when we have that higher order components, and we add new props to it, we may not always know that this gets overwritten. So sometimes you end up in unexpected behavior, why is this problem not what I expect it to be?

[00:02:06]
So that's the only downside to using higher-order components. So if you ever use that make sure to always merge the props or at least kind of make sure that which props are modified or added to those components. Yeah, you can also wrap multiple higher order components, for example, we saw here is with large font size and then with bold font weights.

[00:02:28]
So this would have been wrapped twice, now sometimes it can be difficult to know where certain styles come from or certain props come from cuz it doesn't have to be style. I'll just use that as like a simple example here, so yeah, it can kind of hinder the readability but making it harder to debug and scale and all that stuff.

[00:02:48]
All right, we're already have another exercise here. So, I'm just going to show what the solution is going to look like, should look like. So what you see here real quick is that there's a little spinner while it's fetching the data. Now we want to or preferably we want to reuse that spinner or multiple components of replication.

[00:03:10]
Now in this one, we're just using it here, but this would have been a reason to create a higher-order component for this. So what I want you to do is to create a higher-order component that adds this with loader. Or we can wrap the listings with the with loader higher order components, which adds this spinner while it's loading at.

[00:03:30]
I showed some steps for fetch the data, showed the loading spinner, which we're already importing here. And then, we can pass the fetch data to the reps component, it's pretty similar to what we did here so if you need any inspiration from somewhere, just take a look there.