reactjs - React + Reflux - Issue with queue and timeout for components sharing the same store -

i have component so,

i've refactored example not use valuelink illustrate problem.

in example, have field component, rendered multiple times (3) bound same property in store. concept pretty simple, when input changes in one, reflected in others.

the problem comes if type fast (bash few keys in) , events queued ends in loops each component updating based on earlier state update component. if type slowly, guess more tick timeout on queue, works fine.

a similar symptom can observed using value link. it's doing same thing pretty i'd expect that.

var app = react.createclass({    render: function() {     return  <field dataitemname="propertya" />         <field dataitemname="propertya" />         <field dataitemname="propertya" />;   } });  var recordstore = reflux.createstore({     mixins: [statemixin],     listenables: [formactions, recordactions],      init: function () {             },      getinitialstate: function () {                 return { propertya : 'test' };     },      valuechanged: function (newval, propname) {                 var o = {};         if (newval !== this.state[propname].value) {             o[propname] = newval;                        this.setstate(o);         }     } });  var field = react.createclass({     mixins: [reflux.listenermixin],     getinitialstate: function () {         return ({                        value: recordstore.state[this.props.dataitemname].value                   })     },     componentdidmount: function(){         this.listento(recordstore[this.props.dataitemname], this.updatevalue);                   },     updatevalue: function (value) {                this.setstate({ value: value.value });     },     shouldcomponentupdate: function (nextprops, nextstate) {              return  nextstate.value != this.state.value;     },     componentdidupdate: function (prevprops, prevstate) {                recordactions.valuechanged(this.state.value, this.props.dataitemname);     },     handleinput: function (event) {         this.setstate({ value: event.target.value });     },     render: function () {                          return (          <div classname='form-group'>            <label htmlfor={this._reactinternalinstance._rootnodeid+'_input'}>{this.props.label}</label>            <input classname="form-control" value={this.state.value} id={this._reactinternalinstance._rootnodeid+'_input'} onchange={this.handleinput} />                    </div>         );     } }); 

i've thought using own timeout before updating value in store, i.e. waiting until user has finished input; wondered whether in framework/lib handle it?

thanks

ok, here's answer looking solution using timeout.

the problem can traced react's drainqueue invokes remaining items in queue. in solution, want defer putting updatevalue on queue until we're sure velocity of events being created bashing keyboard has finished.

by changing componentdidupdate use timeout (i think needs > 0) means each keystroke wont trigger event, negating problem asked about.

componentdidupdate: function (prevprops, prevstate) {       **var _self = this;      cleartimeout(_self.state.inputtimer);             _self.state.inputtimer = settimeout(function () { recordactions.valuechanged(_self.state.value, _self.props.dataitemname);},50);** } 

that appears have done job. comments or other solutions welcome. i'd prefer have done using valuelink (which think still can think) , create mixin timeout guess.

this drainqueue func reference.

function drainqueue() {     if (draining) {         return;     }     var timeout = settimeout(cleanupnexttick);     draining = true;      var len = queue.length;     while(len) {         currentqueue = queue;         queue = [];         while (++queueindex < len) {             currentqueue[queueindex].run();         }         queueindex = -1;         len = queue.length;     }     currentqueue = null;     draining = false;     cleartimeout(timeout); } 

thanks