Introducing React Komposer 2 – Hacker Noon

Introducing React Komposer 2: Feed data into #ReactJS components by composing containers

  • I released React Komposer in January as a way to bind data to React UI components.
  • Version 1.x came with a set of utility composers which helps you to use React Komposer with popular data sources.
  • Now you can start using React Komposer 2 and let me know how it works for your app.
  • Even we are not using that prop for data loading.
  • Now with 2.x you could ask React Komposer to watch only a set of props you want.

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…

@ReactiveConf: Introducing React Komposer 2: Feed data into #ReactJS components by composing containers

Performance, Simplicity and Power Lands to React Komposer.

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:

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 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.

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.

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.

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.

Introducing React Komposer 2 – Hacker Noon