debounce-example.js

const {observable, computed, action, extendObservable} = mobx;
const {observer} = mobxReact;
const {Component} = React;

let debounce = delay => (object, key, descriptor) => {
  let getter = descriptor.get

  let state = new WeakMap();

  function initializeState(self) {
    let s = {}
    s.timer = null;
    extendObservable(s, {value: getter.call(self)})
    return s;
  }
  
  function updateState(s, self) {
    if (s.timer) clearTimeout(s.timer);
    s.timer = setTimeout(action(_ => s.value = getter.call(self)), delay);
  }
  
  descriptor.get = function() { 
    let s = state.get(this)
    if (!s) state.set(this, s = initializeState(this))
    else updateState(s, this);
    return s.value;
  }
  
  return descriptor;
}


@observer
class View extends Component {
  @observable actualValue = "test"
  
  @action.bound update(e) { this.actualValue = e.target.value; }
  
  @debounce(1000)
  get debouncedValue() { return this.actualValue + " debounced"; }
  
    render() {
    	return <div>
      	<input type="text" value={this.actualValue} onChange={this.update} />
        <div>Actual value {this.actualValue}</div>
        <div>Debounced value {this.debouncedValue}</div>
      </div>
    }
}

ReactDOM.render(<View />, document.getElementById('mount'));