observer HOC

Along the observer capability, the React.memo is applied to the component. The general idea is, that observed components rarely need to re-render based on a complex props.

If component wrapped to observer depends on updates of legacy context, the underlying React.memo will effectively prevent that update to propagate.

import { observer, useLocalStore } from 'mobx-react' // 6.x or mobx-react-lite@1.4.0
export const Counter = observer<Props>(props => {
  const store = useLocalStore(() => ({
    count: props.initialCount,
      store.count += 1
    },
  }))
  return (
      <span>{store.count}</span>
      <button onClick={store.inc}>Increment</button>
    </div>
  )
})