handling backbone model/collection changes in react.js

Question

I\'ve been working with facebooks framework React.js together with Backbone for the last couple of weeks and I\'m still not entirely sure what is the most appropriate way to

Answer 1

IMO, React is still very new and there are very few established rules on how to work with data and reactive models like Backbone. This is also a strength, if you have an existing application - react can be integrated on some smaller parts of it without redefining the entire data flow.

I believe that since React can call render "smart" at any time – that is only re-rendering parts that have changed – you don’t really need to pass data as states. Just pass the data, add listeners on the top component and call forceUpdate when the model has changed and it will propagate down nicely.

It just seems more "right" to pass backbone models as props, not states.

One important thing that I learned the hard way is to use the model.cid as key (and not Math.random()) when rendering backbone model lists:

var listItems = this.props.myCollection.map(function(item){
    return 
{item.get("someAttr")}
;
});

Because otherwise React won’t be able to recognize what model to re-render because all of them will have new keys on each render.