Rewrite MobX Component Style Has Fix

• Playground Link

Description

React and MobX are libraries that help us build user interfaces with JavaScript.

React hooks allow us to use state and lifecycle methods in functional components. But we need follow some hook rules, or React may break. MobX has an observer function that makes a component update when data changes.

When we use the observer function like this:

export const Example = observer(() => {…})

ESLint, the tool that checks hooks, thinks that Example is not a React component, but just a regular function. So it does not check the hooks inside it, and we may miss some wrong usages.

To fix this, we need to change our component style to this:

const BaseExample = () => {…}
const Example = observer(BaseExample)

Now ESLint can see that BaseExample is a React component, and it can check the hooks inside it.

YAML

id: rewrite-mobx-component
language: typescript
rule:
  pattern: export const $COMP = observer($FUNC)
fix: |-
  const Base$COMP = $FUNC
  export const $COMP = observer(Base$COMP)

Example

export const Example = observer(() => {
  return <div>Hello World</div>
})

Diff

export const Example = observer(() => { 
  return <div>Hello World</div>         
})                                      
const BaseExample = () => {             
  return <div>Hello World</div>         
}                                       
export const Example = observer(BaseExample) 

Contributed by

Bryan Lee