import React, { useState } from 'react';
import { useObservable, observer } from 'react-use-mobx';
import { render } from 'react-dom';

const App = observer(() => {
  const [ count1, setCount ] = useState({a: 1});
  /**
   * initialState must be Object!!!!!!
   */
  const count2 = useObservable({a: 1});
  return (
    <div>
    <h2>useState</h2>
    <button onClick={() => setCount({a: count1.a + 1})}>count: {count1.a}</button>
    <h2>react-use-mobx</h2>
    <button onClick={() => count2.a++}>count: {count2.a}</button>
    </div>
  );
});

render(<App />, document.getElementById('root'));