Awesome
mobx-observer
an observer decorator and factory for all your react-like components.
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
decorator
import Component from 'inferno-component'
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 Component from 'inferno-component'
import {makeObserver, setComponent} from './observer'
setComponent(Component) // you only need to do this once, not for every component
// if you forget to setComponent, you will get this error: Super expression must either be null or a function, not undefined
const Counter = makeObserver((props) => {
return (
<div onClick={() => {
state.val++
}}>
<h1>Header! {props.a}</h1>
<span>Counter is at: { state.val }</span>
</div>
)
})
Performance
Mobx-observer should be on par with mobx-react.