Search code examples
eslintmobxmobx-react

Eslint plugin for mobx that warns if you are using the store without an observer

Does it exist the eslint plugin that warns if i use mobx actions inside a component that is not wrapped in observer HOC:

const Comp1 = () => {
 const store = useContext(rootContext)
 return (
   number: {store.number}
   <button onClick={() => store.incByOne()}>increase number by 1</button>
 )
}

export default Comp1  // warn on console
export default observer(Comp1) // fine
Solution

  • No, there is none, because it won't be possible for eslint to actually understand that you are using some sort of observable value. And observer could be defined in different ways too, not wrapping component inside one does not mean that you are not doing it somewhere else.

    There is a configuration option for MobX though:

    configure({ observableRequiresReaction: true })

    Warns about any unobserved observable access. Use this if you want to check whether you are using observables without a "MobX context". This is a great way to find any missing observer wrappers, for example in React components. But it will find missing actions as well.