Pass new server data to react.js components

Question

I\'m new to React.js and struggling to understand few core concepts to decide should we use this library for our application. My main problem is actually handling update in

Answer 1

At the moment I know at least three ways to pass new data to a component:

1. Re-render component. Do not worry about efficiency of this method because React seems to handle this very well. There are nice articles about this: Change And Its Detection In JavaScript Frameworks and Updating with React.render
2. Use PubSub to allow component to be notified on data change (some helpful examples you can find in the How to communicate between React components post).
3. Binding with a callback (see three jsfiddles below)

For the third option I was inspired by the answer of StevenH and extended it a little. Please check my implementation at jsfiddle.net/kb3gN/12002/.

var Data = { value: 1 };

var dataChange = function(callback){
    if(callback){
        callback(Data);
        setInterval(function(){
            Data.value++;
            callback(Data);
        }, 1000);
    }
    return Data;
};

var World = React.createClass({
    render: function() {
        return {this.props.data.value};
    }
});

var Hello = React.createClass({
    getInitialState: function() {
        return {
          data: this.props.dataChange()
        };
    },
    componentDidMount: function() {
        this.props.dataChange(this.updateHandler)
    },
    updateHandler: function(data) {
        this.setState({
          data: data
        });
    },
    render: function() {
        return (
            

                Value: 
            
        );
    }
});

React.renderComponent(, document.body);

Also there is an extended version at jsfiddle.net/kb3gN/12007.

function ListenersService(){
    var listeners = {};
    this.addListener = function(callback){
        var id;
        if(typeof callback === 'function'){
            id = Math.random().toString(36).slice(2);
            listeners[id] = callback;
        }
        return id;
    }
    this.removeListener = function( id){
        if(listeners[id]){
            delete listeners[id];
            return true;
        }
        return false;
    }
    this.notifyListeners = function(data){
        for (var id in listeners) {
          if(listeners.hasOwnProperty(id)){
            listeners[id](data);
          }
        }
    }
}

function DataService(ListenersService){
    var Data = { value: 1 };
    var self = this;

    var listenersService = new ListenersService();
    this.addListener = listenersService.addListener;
    this.removeListener = listenersService.removeListener;
    this.getData = function(){
        return Data;
    }

    setInterval(function(){
        Data.value++;
        listenersService.notifyListeners(Data);
    }, 1000);
}
var dataSevice = new DataService(ListenersService);

var World = React.createClass({
    render: function() {
        return {this.props.data.value};
    }
});

var Hello = React.createClass({
    getInitialState: function() {
        return {
          data: this.props.dataService.getData()
        };
    },
    componentDidMount: function() {
        this.props.dataService.addListener(this.updateHandler)
    },
    updateHandler: function(data) {
        this.setState({
          data: data
        });
    },
    render: function() {
        return (
            

                Value: 
            
        );
    }
});

React.renderComponent(, document.body);

This implementation is not completely following the idea of isolated components (because Hello component is dependent on the DataService API), but it can be abstracted further and is up to the app developer which app-specific conventions his components will follow. For example see the mix of the first and second examples at jsfiddle.net/kb3gN/12015 (halloDataStatic object and halloDataDynamic callback)

Note: The ListenersService used in the example is following Observer Pattern and the pattern itself has more cons than pros in many scenarios. But beside that, What I wanted to show with these examples is that there is a way of data binding with a callback

React.renderComponent(, document.getElementById('static'));
React.renderComponent(, document.getElementById('dynamic'));