eslint react hooks rules do not work when a component is wrapped in observer

[javiergonzalez-synth]

This is not really a but report in MobX itself (sorry), but I just wanted to point out that react-hooks eslint rules (other than dependency checking) are not working at all for components wrapped in observer (or wrapped in any function other than react built-ins like memo/forwardRef) for that matter.

There's an (ugly) workaround though, which is wrapping a named function:

const Component = observer(function Component() {
  ...
})

that perhaps could be added to the docs.

I created a fix 3 weeks ago - https://github.com/facebook/react/pull/34608 - but it seems it didn't gain much traction 😔, which is a shame because these rules are useful even in the mobx-react world (and even worse, I found they stopped working by pure chance)

[urugator]

Take a look at componentWrapperFunctions setting at https://github.com/jsx-eslint/eslint-plugin-react?tab=readme-ov-file#configuration-legacy-eslintrc-

[javiergonzalez-synth]

Thank you for the hint, but I might be missing something... How do the settings from eslint-plugin-react (from some third party developer) affect how eslint-plugin-react-hooks (from meta/react) works?

Does the first modify the eslint AST that the second uses or something similar? 🤔

[urugator]

Sorry, I didn't realize these are two libs, I just knew that setting exists. I can only suggest to bite the bullet and use named functions as it also solves issues with display name and it's applicable to any HOC. IIRC some rule required named function even in forwardRef/memo. Am a bit out of loop atm, but this used to be a way to go.

[kubk]

There's also mobx-react-observer that should solve it. It's a Babel/SWC plugin that automatically wraps your components with observer, so you don't have to do it manually.

I've switched my projects to it and it has improved DX in many ways