Introducing React Komposer 2

Performance, Simplicity and Power Lands to React Komposer.

Arunoda Susiripala
JavaScript Mantra
2 min readNov 8, 2016

--

I released React Komposer in January as a way to bind data to React UI components. It was a universal tool which you could use with any kind of data source, whether it’s a promise, Meteor, redux, Rx.js, or nearly anything.

However, it has a few — but very critical issues. That’s what we are fixing with version 2. Along with those fixes, it also comes with some cool features.

Let’s have a look at them:

Performance

One of the problems of React Komposer version 1.0 is that it will re-run the data loading function for every prop change. Even if we are not using that prop for data loading.

This was a pretty big performance issue, and may have invoked some unnecessary network calls.

Now with 2.x you could ask React Komposer to watch only a set of props you want. With that, now you have the control.

We also improved the pure container functionality. Have a look at the docs for more information.

Simplicity

No Default Components

Earlier, we shipped loading and error components directly with React Komposer. That was a pretty reasonable thing to do, at first. But it gives us a headache when we are adding React Native support.

Now we don’t ship them and you need to provide them manually. This may seem like too much work, but you need to set it once for your app.

Utility Composers

Version 1.x came with a set of utility composers which helps you to use React Komposer with popular data sources.

Because of this we had to carry MobX as a dependency, even though your app doesn’t use it.

So, we removed it and now we recommend to write data loader generators instead. Actually, you could share them via NPM as well.

Power

Injecting dependencies is crucial for data containers. It is a way to integrate your UI components with app-specific stuff.

So, we have added a neat feature to pass an env for React Komposer. It can also be used as a substitute for React Context.

In the coming weeks, I will be re-implementing Mantra architecture for React on top of this; That will be an interesting project.

Now you can start using React Komposer 2 and let me know how it works for your app.

--

--