@thejohnfreeman/observer v1.0.1
observer
A higher-order component for reactive updates.
What about mobx-react
?
There are two primary differences between this observer
higher-order
component (HOC) and the one of the same
name from
mobx-react
. These differences both
serve to simplify the implementation of this HOC.
This HOC does not try to add methods to an existing class component and return it. Instead, the component class that this HOC returns manages the instance of the component type you pass in, instead of letting React manage it.
This HOC does not try to take an existing React component and make it reactive while respecting all the lifecycle methods. Instead, it tries to take a component from a specific subset of React components, those with only a render method and no lifecycle methods, and make it reactive in the most straightforward way.
Usage
If your component uses all of its props and passes them unchanged to other components, then it is fine to pass a stateless functional component to this HOC, but you won't get much benefit unless the component is "branching", i.e. it renders more than one non-terminal (i.e. non-HTML) component.
const BranchingComponent = ({ a, b, c}) => (
<A a={a}>
<B b={b} />
<C c={c} />
</A>
)
If all your component does is mutate props or add constant props for the one
component that it renders, then it is likely faster and more memory efficient
to just let it run on every render. Plus, you might check if your component's
purpose is already served by a HOC from
recompose
.
const Before = (Component) => ({ x }) => <Component x={x + 1} />
import { mapProps } from 'recompose'
const After = mapProps(({ x }) => ({ x: x + 1 }))
However, if your component uses a subset of its props or derives props that
change less frequently than its props as a whole, then the observer
HOC will
serve you well.
import { computed } from 'mobx'
import { observer } from '@thejohnfreeman/observer'
class MyComponent extends React.Component {
@computed
private get x() {
return this.props.x + 1
}
public render() {
return <X x={this.x} />
}
}
export default observer(MyComponent)