Woops! It looks like we’ve missed our Friday’s usual article! We’re sorry! This post covers for that.

Now might be as good a time as any to tell you that BesLogic’s office will be closed for the holidays from December 23rd to January 2nd, inclusively. During that time, we will not publish a Friday’s article, just so you know! But we hope you will have a good time for the holidays!

So, let’s get started! This week, we’ll briefly talk about the different ways you can use your React components, aside from simply rendering them.

Indeed, if the most common usage of React components may be rendering, you will find that there may be more than one use cases to actually providing React components as function parameters, for many different reasons.

There are actually two ways in which you can provide a component to a function: either as a Node, or as a ComponentType.

If you use plain JavaScript, you may not be familiar with the terms, but if you use a type system, such as TypeScript or Flow, you most probably have seen them, especially the Node type.

Indeed, if you have ever provided a children to a React component, that’s the same Node! However, there is more than one way to use it.

We’ll see that there is a major difference between the two types, but let’s look at an example of the Node type:

In this example, we create a function that does all the wrapping necessary for our rendering, such as using a React-Redux “Provider” element. Since we do not need to change anything about our element, it’s easiest to use the Node type, and just provide it as is. In turn the function that receives doesn’t do much on it other than providing it itself as children for the provider.

You’ll notice that when we provide a Node, we “construct” the Node (for which I mean, we use the JSX syntax – if you use it) when we call the function, instead of inside the function.

You’ll also find that a Node has a lot of functionality bound to it. However, its usage remains simple, as shown in the example.

Shows what a Node type can do

Shows a part of the different functions and properties available on the Node type.

If you want a bit more flexibility when you use the component that is provided to you, you can use the other type we mentioned, which is the ComponentType<Props> type. It is especially useful if you are writing a higher order component. For instance, if you want to add some properties to an element, that’s the type to use.

It’s also very useful to reduce the amount of code needed for a list of similar elements, like some tab contents that would require very similar base props.

This way, you can easily reduce and reuse code.

I tried to choose examples that are less standard than the classic “children” and “property mapper” use cases for these types. It’s true that they are probably the most common usage, but there are many more ways to use these features than to provide a children.

As we missed the Friday mark last week, our next article will be coming faster than usual! So see you Friday!