Q&A: Higher-Order Components

[00:00:00]
>> Evan You: So there's a question in the chats which asks can we have logic that fetch the avatar Alon Mixin. Which is a good question, because it's more common to do this kind of things with Mixins in the View world. The benefits of using a higher order component here is that you don't really pollute the inner avatar component.

[00:00:21]
The inner avatar component can be used in other contexts. It can be enhanced by a different enhancer. So in this sense, higher order components offer a bit more reusability, but if that's not a concern, then using Mixins are perfectly fine. Like you know this component is only used in this project.

[00:00:46]
And it's a very specific task that's specifically for this project and mixings are totally fine. But higher order components in theory provides a higher level of reusability, especially like in when you want to reuse the inner component as many places as possible.
>> Evan You: And another advantage is this makes the inner component more testable because it doesn't have any logic coupled with it.

[00:01:21]
And you can test the and the inner component separately. Instead with a Mixin you sort of have this only one component that does both in the same time. So you either test both at the same time, or then you have a harder time of testing it. Testing the two parts, the rendering and the data fetching logic separately.

[00:01:43]
So I would say this offers a better separation of concern as well, but I wouldn't really recommend for using higher order components just for the sake of using it. It's really about realizing what the problems you're trying to solve. Does it actually make it better for your case?

[00:02:05]
And sometimes Mixin can really just be more, easier to grasp, because when you have too many high order components the component hierarchy becomes really complex. And it can become harder to find out which responsibility falls where and figuring out how of all these are stacked together and how they interact with each other.

[00:02:30]
And also when you have multiple layers you need to be intentional, you have to pass a lot of props down the way. And having more nested components also have some performance costs, cuz you're now having more component instances in your app. And more communication of your props. All of these are overheads that you can avoid by using Mixins.

[00:02:54]
So you, yeah, know the pros and cons of both approaches and pick the one that fits your use case.