// first example

@observer
export class ReactMobxExample extends React.Component {
    componentDidMount() {
        // could be async await but this is not part of this article
        askSomethingFromBackend().then(this.setSomething);
    }

    render() {
        return <div>
            {this.state.something}
            <button onClick={this.reset}></button>
        </div>;
    }
    @action.bound
    reset() {
        this.setSomething(0);
    }

    @action.bound
    setSomething(value) {
        this.something = value;
    }
}

// second example
class SomethingModel {

    @observable something = 0;

    @action.bound
    reset() {
        this.setSomething(0);
    }

    @action.bound
    setSomething(value) {
        this.something = value;
    }

    update() {
        askSomethingFromBackend().then(this.setSomething);
    }
}
// one easier way to make singleton

export const SomethingStore = new SomethingModel();

@observer
export class ReactMobxExample extends React.Component {

componentDidMount() {
   SomethingStore.update();
}

render() {
   return <div>
   {SomethingStore.something}
      <button onClick={SomethingStore.reset}></button>
   </div>;
   }
}

const ReactExample = observer(() => {

            // component did mount in functional react

useEffect(() => SomethingStore.update(), []);

return <div>

{SomethingStore.something}

<button onClick={SomethingStore.reset}></button>

</div>;

});