React/Flux lag

ReadMe.md

Here's a simplified setup. The FilterBar contains six buttons. The button that is pressed is given the css class "active."

FLUX-filterActions.js

var FilterActions = {
    clickCatFilter: function(catId){
        Dispatcher.dispatch({
            actionType: FilterConst.CLICK_CAT_FILTER,
            data: catId
        });
    }
}

FLUX-filterStore.js

var _filters = {
    crews: [],
    category: 'all',
    taskType: null,
};

var FilterStore = assign({}, EventEmitter.prototype, {

    getAll: function(){
        return _filters;
    },

    emitChange: function(){
        this.emit('change');
    },
  
    addChangeListener: function(callback){
        this.on('change', callback);
    }

});


Dispatcher.register(function(payload){

    switch(payload.actionType){

        case FilterConst.CLICK_CAT_FILTER:
            var catId = payload.data;
            // if re-clicking category, reset to all
            _filters.category = (_filters.category == catId) ? 'all' : catId;
            _filters.taskType = null;
            FilterStore.emitChange();
            break;

    }
});

JSX-app.jsx

var CrewtimeApp = React.createClass({
      render: function(){
        return (
        <div>

            <div id="bottom-container">

                <FilterBar taskCats={taskCats} taskTypes={taskTypes} filters={this.state.filters} />

            </div>

        </div>
        );
    },
}

JSX-filterBar.jsx

var FilterBar = React.createClass({

    catButtonClick: function(catId){
        FilterActions.clickCatFilter(catId);
    },

    render: function(){

        this.props.taskCats.sort(function(a,b){
            return a.display_order - b.display_order;
        });
        var allCats = [{
            id: 'all',
            name: 'All'
        }].concat(this.props.taskCats);
        var self = this;
        return (
        <div id="filter-bar" className="navbar navbar-default">
            <div className="container-fluid">
                <ul className="nav navbar-nav">

                    {allCats.map(function(cat){
                        return <FilterButton category={cat} filters={self.props.filters} clickFunc={self.catButtonClick} key={cat.id} />
                    })}

                </ul>
            </div>

        </div>
        );
    }
});

JSX-filterButton.jsx

var FilterButton = React.createClass({

    filterClick: function(){
        var catId = this.props.category.id;
        window.sessionStorage.setItem('start', Date.now())
        this.props.clickFunc(catId);
    },

    // Timer mechanism. Getting +- 400ms
    componentWillUpdate: function(){
        var finish = Date.now();
        var start = window.sessionStorage.getItem('start');        
        if(start){
            window.sessionStorage.removeItem('start');
            console.log('elapsed', finish - start)
        }
    },

    render: function(){
        var activeClass = (this.props.filters.category == this.props.category.id) ? ' active' : '';
        var cat = this.props.category;
        return (
            <li className={"task-cat-li job-cat-" + cat.id + activeClass}>
                <a data-task-category={cat.id} onClick={this.filterClick}
                    href="javascript:void(0);">{cat.name}</a>
            </li>
        );
    }
});