eslint-plugin-react/require-render-return 用于功能组件

Question

Unfortunately eslint-plugin-react/require-render-return works only for Class components. It does not work for functional components, at least on my end.

Why do I need this?

Consider the following example:

const Component = () => <div />

The above functional component returns an empty div.

Now consider that we may have to add a hook:

const Component = () => {
   useEffect(() => { /* some side-effect here */ } );
   <div />
}

So while switching the arrow function from bodyless to having a function body, the developer forgets to return the DOM and the function returns nothing. The only way to catch this regression is during code review, which involves the human factor, and this could be missed. It would be better if there was a linter rule.

So what do you guys do?

Answer 1

This is a perfect example of why you should use TypeScript and not plain old JavaScript. It would throw an error at compile/write time pointing to that problem.

const SomeComponent: React.FC = () => <div />
// ✅

const AnotherComponent: React.FC = () => {
  useEffect(() => {})
}
// 💥 "Type 'void' is not assignable to type 'ReactElement<any, any> | null'."

React combined with TypeScript really is the best in every possible way. I cannot emphasize enough that you should absolutely learn TypeScript, it is worth every second of your time.