Mobx version 6 has been released, and it's a big one.
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">Just released <a href="https://twitter.com/hashtag/mobx?src=hash&ref_src=twsrc%5Etfw">#mobx</a> 6! <br><br>👉 makeAutoObservable 😍<br>👉 Decorator free by default<br>👉 Fully revamped docs for modern React <br>👉 Supersedes both MobX 4 and 5<br>👉 Codemod for migration<a href="https://t.co/U6EpZaNhyz">https://t.co/U6EpZaNhyz</a></p>— Michel Weststrate (@mweststrate) <a href="https://twitter.com/mweststrate/status/1311344102991159296?ref_src=twsrc%5Etfw">September 30, 2020</a></blockquote>
Decorator support is officially dropped, so the syntax for creating observable objects has changed (checkout store.js).
There is no need for custom babel configuration anymore.
In comparison to current mobx examples, the difference is that I'm using regular `React.useContext` and `React.createContext` to consume the mobx store, [this is recommended by the official documentation.](https://mobx.js.org/react-integration.html#using-external-state-in-observer-components)
When the component is wrapped in the observer function, the component function is given a name so it appears correctly in the react development tools.
As of mobx v6 `mobx-react` package bundles `mobx-react-lite` so I could have used that package, but I've decided to use the `lite` one, because of the size.
b28b8b2913