This is a fork of mobx-react for Inferno
Package with inferno component wrapper for combining Inferno with mobx.
Exports the observer
decorator and some development utilities.
For documentation, see the mobx project.
This package supports Inferno.
npm install mobx-inferno --save
import {observer} from 'mobx-inferno';
This package provides the bindings for MobX and Inferno. See the official documentation for how to get started.
Function (and decorator) that converts a Inferno component definition, Inferno component class or stand-alone render function into a reactive component. See the mobx documentation for more details.
import Inferno from 'inferno';
import createClass from 'inferno-create-class';
import {observer} from "mobx-inferno";
// ---- ES5 syntax ----
const TodoView = observer(createClass({
displayName: "TodoView",
render() {
return <div>{this.props.todo.title}</div>
}
}));
// ---- ES6 syntax ----
import Inferno from 'inferno';
import Component from 'inferno-component';
import {observer} from "mobx-inferno";
@observer
class TodoView extends Component {
render() {
return <div>{this.props.todo.title}</div>
}
}
// ---- or just use a stateless component function: ----
import Inferno from 'inferno';
import {observer} from "mobx-inferno";
const TodoView = observer(props => (
<div>{props.todo.title}</div>
))
It is possible to set a custom shouldComponentUpdate
, but in general this should be avoid as MobX will by default provide a highly optimized shouldComponentUpdate
implementation, based on PureRenderMixin
.
If a custom shouldComponentUpdate
is provided, it is consulted when the props changes (because the parent passes new props) or the state changes (as a result of calling setState
), but if an observable used by the rendering is changed, the component will be re-rendered and shouldComponent
is not consulted.
React components usually render on a fresh stack, so that makes it often hard to figure out what caused a component to re-render.
When using mobx-react
you can define a new life cycle hook, componentWillReact
(pun intended) that will be triggered when a component will be scheduled to re-render because
data it observes has changed. This makes it easy to trace renders back to the action that caused the rendering.
import Inferno from 'inferno';
import Component from 'inferno-component';
import {observer} from "mobx-inferno";
@observer
class TodoView extends Component {
componentWillReact() {
console.log("I will re-render, since the todo has changed!");
}
render() {
return <div>{this.props.todo.title}</div>
}
}
componentWillReact
doesn't take argumentscomponentWillReact
won't fire before the initial render (usecomponentWillMount
instead)componentWillReact
won't fire when receiving new props or aftersetState
calls (usecomponentWillUpdate
instead)
Should I use observer
for each component?
You should use observer
on every component that displays observable data.
Even the small ones. observer
allows components to render independently from their parent and in general this means that
the more you use observer
, the better the performance become.
The overhead of observer
itself is neglectable.
See also Do child components need @observer
?