Plugin for eslint that checks whether you have wrapped the component in the observer when using the store
$ npm install eslint-plugin-mobx-observer-checker --save-devUpdate eslint config
"plugins": [
...
"mobx-observer-checker"
],
"rules": {
...
"mobx-observer-checker/observer-wrapper": "warn"
}In order for the linter to work, you need to adhere to the following rules:
- You must use the store using the hook that has in the name
useandStore:
// work
const {bar} = useRootStore()
const {foo} = useStore()
// not work
const store = useContext(RootSoreContext)- The component must be wrapped in the Observer when exporting by default:
// work:
export default observer(Foo)
// not work:
export const Foo = observer(()) => {}
const Foo = observer(()) => {}
export default Fooimport useStore from 'hooks/useStore'
import { observer } from "mobx-react-lite";
const Foo = () => {
const {bar} = useRootStore()
return { ... }
}
// Error
export default Foo
// Fine
export default observer(Foo)