mobx-observer

Required methods

componentDidMount
componentWillUnmount
render

If your component has these lifecycle methods, mobx-observer will be able to subscribe/unsubscribe to changes on your mobx observables. Which means you can use this not only with react, but also with inferno, preact, react-lite.

For React, it is safer to use the official mobx-react.

Install

npm i mobx-observer -S

Usage

import observer from 'mobx-observer'
 
@observer
class Counter extends Component {
  render() {
    return (
      <div onClick={() => {
        state.val++
      }}>
        <span>Counter is at: { state.val }</span>
      </div>
    )
  }
}
 
// stateless component style
import {makeObserver, setComponent} from './observer'
import Component from 'inferno-component'
setComponent(Component) // you only need to do this once, not for every component
 
const Counter = makeObserver((props) => {
  return (
      <div onClick={() => {
        state.val++
      }}>
        <h1>Header! {props.a}</h1>
        <span>Counter is at: { state.val }</span>
      </div>
    )
})