diff --git a/docs/best/pitfalls.md b/docs/best/pitfalls.md index 63da55707..6bfbdb7aa 100644 --- a/docs/best/pitfalls.md +++ b/docs/best/pitfalls.md @@ -58,6 +58,27 @@ For more info see [what will MobX react to?](https://mobx.js.org/best/react.html `@observer` only enhances the component you are decorating, not the components used inside it. So usually all your components should be decorated. Don't worry, this is not inefficient, in contrast, more `observer` components make rendering more efficient. +### `@inject('store')` before `@observer` will cause MobX to not trigger + +The effect with React is that the it will never render on observable changes. + +This is wrong +```typescript +@observer +@inject('store') +``` +It must be +```typescript +@inject('store') +@observer +``` + +You'll notice a warning +``` +Mobx observer: You are trying to use 'observer' on a component that already has 'inject'. Please apply 'observer' before applying 'inject' +``` + + ### Don't copy observables properties and store them locally Observer components only track data that is accessed _during_ the render method. A common mistake is that data plucked of from an observable property and stored will for that reason not be tracked: