Patterns for component reuse

Good morning Kiwi.

So far in this video series we've been building components using the Linux or the functional programming philosophy. You build a component that does one thing and does it really well then you compose multiple small components into big chunks that do parts of your app and things like that.

But we can take lessons from the object-oriented approach as well. We can make the components reusable by having them more flexible in a way where other components can tell our components how to render something. I know that sounds kind of mind-bending, you can have components that don't actually know how to render anything, they just contain logic and then another component that's patched into this one tells it how to render.

That sort of stuff is what we're going to be talking about in the next couple of lessons in this video series. We're going to be covering things like higher order components, composite components, function as children, render props and other advanced react patterns. We're going to be doing that as a deep dive for each topic in a single video. This one is more like an overview.

Ina nutshell, higher order components let you extend a specific component with more functionality. Render props and function as children let you inject dependencies into your components and composite components let you use something very similar to functional composition where you are properly composing function.

Our main objective is to build components that are more flexible and more reusable so we can use them in more different places, potentially release them as a library for others to use. The main idea is that instead of having your rendering tightly coupled with the logic of your component, you can decouple those. You can have a component that just takes care of all the logic and the smartness of something like let's say a drop down search thingy and you can then tell your users to say hey you get to specify how this is going to be rendered. And that's a pretty powerful pattern I think.

All of that comes in the next couple of videos because that's how I can keep these guys short.

Know someone who wants to learn React and its whole ecosystem? Share 👇


Cheers,
~Swizec