Building a Component Registry in React

In Software Engineering, a software design pattern is a reusable solution to a recurrent problem. In this article I will talk about a solution that I think it’s becoming a pattern, since I have seen it in other projects, but that is not well stablished yet. We will talk about Component Registers.

The problem

Usually when working in React and we need to load a component based on a condition, we import components like this:

This works fine if we only have 2 components, but think about a situation where you need to choose one component from multiple options. The first approach is to use a switch case:

It works just fine too, but it’s a lot of code and is not scalable, there must be a better solution.

Solution: Using an object to register components

The next approach is to use object keys, for most use cases, it's the best approach, then we can do something like this:

This is something like a registry of components, you have your components associated to a key, so you can access the component through that key, that can be passed to your switch component. Nice and clean.

A problem about this approach is that is not possible to modify this registry from outside. What if you have a list of hundred of components but your project just uses a few and you don't need to import them all? What about if you want to have this registry global and be capable to register and overwrite components? what if we want to load those components as chunks? what if you want to add more logic to your registry? Then we would write a small utility to contain all of our components, and some functions to operate over this registry. This is the use case when we can use the Components Registry pattern.

If you use redux or any flux implementation, it's a good idea to make your data serializable. Components are not serializable, so it's not a good idea to keep it in your store. Instead, we will use an object.

You can implement this in different ways, I will show you a way using a class.

Then you can implement a Switch component that receives a Registry instance as prop:

The components registry should look something like this:

Propagating the registry through a registry provider:

Instead of passing the registry through props to a switch component, we can implement a registry provider, very similar to the way Redux react bindings propagate the store to the containers . A way to do this is through context.

Be careful, react documentation says:

"If you want your application to be stable, don’t use context. It is an experimental API and it is likely to break in future releases of React."

https://facebook.github.io/react/docs/context.html#why-not-to-use-context

First, we will need a ComponentsProvider that will receive the registry as prop:

Then we can create a HOC that will bring to you the registry as a prop. This is a good idea, so, if context api changes, we will need to do just a few changes instead of updating all the components that uses this api.

And modify our switch component to use this HOC, so we don’t need to pass the registry.

Real world examples:

Using the registry to overwrite framework components:

It's very common for organizations to have multiples react projects based on a toolkit or framework. You can use the registry to overwrite some components if it doesn't suit your needs without re-writing all your framework, or making forks or branches.

Separate logic and presentation

You can use the registry to pass rendering functions instead of components, that way you can change how the data is shown but not the logics behind it.

First, define a rendering function, for convenience, it will have access to props, state and context if available:

then, in the component render, call to the render function:

Load your gui from a configuration file:

You can build a parser that reads a JSON or XML and load components based on it. This is how I use it the most. Our user interfaces are built using a JSON that tell us where and how the components should be rendered. The parser takes this json and load a component using a switch. UI changes only requires editing a JSON instead of editing source code. Most of the components are imported from a library, but custom components per project can be created and registered to be used just in that project.

Conclusion

Component Registry is a powerful concept, allows you to build scalable and flexible UI. It's very useful for big toolkits and for use cases where your logic is the same in all projects but it can differ in the presentation. It has allowed us to build big apps that use a common base code but differ in some presentational details reusing the code.

I hope you learnt something new and useful reading this article. Something to say? please comment!