Add section on babel macro to observer HOC doc

content/observe/hoc.mdx

@@ -48,3 +48,34 @@ export const Counter = observer<Props>(props => {
   )
 })
 ```
+
+## Babel macro
+
+By default, components wrapped with the observer HOC are anonymous. The `Counter` component from the example above would only
+show up as `wrappedComponent` or `Memo` in the React DevTools or in console log mesages.
+
+For a better developer experience, there is a Babel macro included in the `mobx-react-lite` package, which
+transforms components wrapped with `observer` to retain their name.
+
+In order to use the macro, install [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros).
+
+```
+npm install --save-dev babel-plugin-macros
+```
+
+Next add the `babel-plugin-macros` plugin to your Babel config (`.babelrc`):
+
+```
+{
+  "plugins": ["macros"]
+}
+```
+
+Now you can use the macro simply by changing the import declarations from `mobx-react-lite` to `mobx-react-lite/macro`.
+
+```tsx
+import { observer, useLocalStore } from 'mobx-react-lite/macro'
+```
+
+
+