import {compose, ParentContainer, ChildContainer} from 'unstated-compose-suspense';

@compose ({
  counter: Counter,
  message: Message
})
class App extends ParentContainer {
  update () {
    this.suspend (); // After calling `suspend` the components won't be notified of any state update
    this.ctx.counter.setValue ( 10 ); // This will change the state, but it won't trigger an update of the components
    this.ctx.message.setMessage ( 'Bar' ); // This will change the state, but it won't trigger an update of the components
    this.unsuspend (); // Now updates are no longer suspended. If the state has been updated it will notify the components, just once (instead of twice in this particular case)
  }
}

class Counter extends ChildContainer {
  state = { value: 0 }
  setValue ( value ) {
    this.setState ({ value });
  }
}

class Message extends ChildContainer {
  state = { message: 'Foo' }
  setMessage ( message ) {
    this.setState ({ message });
  }
}