Awesome
mobx-preact
MobX bindings specifically for Preact.
This package provides the bindings for MobX and Preact. It does not require preact-compat
. The feature set of mobx-preact
is a slightly slimmed down adaptation of mobx-react
. The features available are reflected by this document. The features omitted are:
- Global error handler with onError
- Stuff to do with PropTypes
- Dev Tools
- Typescript bindings
If you would like to see any of these features included please create an issue or PR.
Installation
npm install mobx-preact --save
import {observer} from 'mobx-preact';
Other versions
Please note that major versions of mobx-preact
are synced with major versions of mobx
. Consult the following table
to ensure you install the right version of mobx-preact
given the mobx
version you are using:
mobx version | mobx-preact version |
---|---|
5.x | 3.x (latest) |
4.x | 2.x |
3.x | 1.x |
E.g. If using mobx
v3:
npm install mobx-preact@1 --save
API documentation
observer(componentClass)
Function (and decorator) that converts a Preact component class or stand-alone render function into a reactive component, which tracks which observables are used by render
and automatically re-renders the component when one of these values changes.
See the MobX documentation for more details.
import {Component} from 'preact';
import {observer} from "mobx-preact";
const TodoView = observer(class TodoView extends Component {
render() {
return <div>{this.props.todo.title}</div>
}
})
// ---- ESNext syntax with decorators ----
@observer
class TodoView extends Component {
render() {
return <div>{this.props.todo.title}</div>
}
}
// ---- or just use a stateless component function: ----
const TodoView = observer(({todo}) => <div>{todo.title}</div>)
Observer
Observer
is a Preact component, which applies observer
to an anonymous region in your component.
It takes as children a single, argumentless function which should return exactly one Preact component.
The rendering in the function will be tracked and automatically re-rendered when needed.
This can come in handy when needing to pass render function to external components or if you
dislike the observer
decorator / function.
Example:
class App extends Component {
render() {
return (
<div>
{this.props.person.name}
<Observer>
{() => <div>{this.props.person.name}</div>}
</Observer>
</div>
)
}
}
const person = observable({ name: "John" })
render(<App person={person} />, document.body)
person.name = "Mike" // will cause the Observer region to re-render
Server Side Rendering with useStaticRendering
When using server side rendering, normal lifecycle hooks of Preact components are not fired, as the components are rendered only once.
Since components are never unmounted, observer
components would in this case leak memory when being rendered server side.
To avoid leaking memory, call useStaticRendering(true)
when using server side rendering. This makes sure the component won't try to Preact to any future data changes.
Which components should be marked with observer
?
The simple rule of thumb is: all components that render observable data. If you don't want to mark a component as observer, for example to reduce the dependencies of a generic component package, make sure you only pass it plain data.
Enabling decorators (optional)
Decorators are currently a stage-2 ESNext feature. How to enable them is documented here.
Should I still use smart and dumb components?
See this thread.
TL;DR: the conceptual distinction makes a lot of sense when using MobX as well, but use observer
on all components.
About shouldComponentUpdate
It is possible to set a custom shouldComponentUpdate
, but in general this should be avoided 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 shouldComponentUpdate
is not consulted.
componentWillReact
(lifecycle hook)
When using mobx-preact
you can define a new life cycle hook, componentWillReact
(pun intended) that will be triggered when a component is scheduled to be re-rendered because data it observes has changed. This makes it easy to trace renders back to the action that caused the rendering.
import {observer} from "mobx-preact";
@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)
Provider
and inject
Provider
is a component that can pass stores (or other stuff) using Preact's context mechanism to child components.
This is useful if you have things that you don't want to pass through multiple layers of components explicitly. If
Provider
has multiple immediate children, they will be wrapped with a div
element.
inject
can be used to pick up those stores. It is a higher order component that takes a list of strings and makes those stores available to the wrapped component.
@inject("color") @observer
class Button extends Component {
render({ color }) {
return (
<button style={{background: color}}>
{this.props.children}
</button>
);
}
}
class Message extends Component {
render({ text }) {
return (
<div>
{text} <Button>Delete</Button>
</div>
);
}
}
class MessageList extends Component {
render() {
const children = this.props.messages.map((message) =>
<Message text={message.text} />
);
return <Provider color="red">
{children}
</Provider>;
}
}
connect
In mobx-react
(v4) you can inject and observe simultaneously with observe
, but this is now deprecated for these reasons.
In version 0.x of mobx-preact
this could be achieved using connect
and is still supported for backwards compatibility:
// MyComponent.js
import { h, Component } from 'preact';
import { connect } from 'mobx-preact';
@connect(['englishStore', 'frenchStore'])
class MyComponent extends Component {
render({ englishStore, frenchStore }) {
return <div>
<p>{ englishStore.title }</p>
<p>{ frenchStore.title }</p>
</div>
}
}
export default MyComponent
I'm not currently sure if it's worth deprecating connect
in mobx-preact
for the same reasons.
In mobx-preact
, using observe
to simultaneously inject and observe is not supported. You must use connect
if you want to do this.
Notes:
- If a component asks for a store and receives a store via a property with the same name, the property takes precedence. Use this to your advantage when testing!
- Values provided through
Provider
should be final, to avoid issues like mentioned in React #2517 and React #3973, where optimizations might stop the propagation of new context. Instead, make sure that if you put things incontext
that might change over time, that they are@observable
or provide some other means to listen to changes, like callbacks. However, if your stores will change over time, like an observable value of another store, MobX will warn you. To suppress that warning explicitly, you can usesuppressChangedStoreWarning={true}
as a prop at your own risk. - When using both
@inject
and@observer
, make sure to apply them in the correct order:observer
should be the inner decorator,inject
the outer. There might be additional decorators in between. - The original component wrapped by
inject
is available as thewrappedComponent
property of the created higher order component. - For mounted component instances, the wrapped component instance is available through the
wrappedInstance
property (except for stateless components). Currently not working
Inject as function
A functional stateless component would look like:
var Button = inject("color")(observer(({ color }) => {
/* ... etc ... */
}))
Customizing inject
Instead of passing a list of store names, it is also possible to create a custom mapper function and pass it to inject. The mapper function receives all stores as argument, the properties with which the components are invoked and the context, and should produce a new set of properties, that are mapped into the original:
mapperFunction: (allStores, props, context) => additionalProps
The mapperFunction
itself is tracked as well, so it is possible to do things like:
const NameDisplayer = ({ name }) => <h1>{name}</h1>
const UserNameDisplayer = inject(
stores => ({
name: stores.userStore.name
})
)(NameDisplayer)
const user = observable({
name: "Noa"
})
const App = () => (
<Provider userStore={user}>
<UserNameDisplayer />
</Provider>
)
render(<App />, document.body)
N.B. note that in this specific case neither NameDisplayer
nor UserNameDisplayer
needs to be decorated with observer
, since the observable dereferencing is done in the mapper function
Testing store injection
It is allowed to pass any declared store in directly as a property as well. This makes it easy to set up individual component tests without a provider.
So if you have in your app something like:
<Provider profile={profile}>
<Person age={'30'} />
</Provider>
In your test you can easily test the Person
component by passing the necessary store as prop directly:
const profile = new Profile()
const mountedComponent = mount(
<Person age={'30'} profile={profile} />
)
Bear in mind that using shallow rendering won't provide any useful results when testing injected components; only the injector will be rendered. To test with shallow rendering, instantiate the wrappedComponent
instead: shallow(<Person.wrappedComponent />)
FAQ
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 negligible.
See also Do child components need @observer
?