1

Having a React project with some component written in Class style and some others written in Hooks styles make the newcomers confuse and harder to reuse common logic. Is there a way, for example:

  • An alternative library like Preact, Inferno,... which compatible with React but only support hooks
  • Or an ESLint feature that warning every time someone try to create a React class component
  • ...

to prevent my developer from writing Class component, as I want all components in my React project to be functional component with hooks only.

Improve this question
1

2 Answers 2

Reset to default
1

I also wanted a lint rule that accomplished this so I wrote eslint-plugin-react-prefer-function-component.

The only components that can not be written as a function component are those that implement componentDidCatch, so by default components implementing that method are allowed. This option is configurable.

eslint-plugin-react/prefer-stateless-function (mentioned in other answers) allows class components that have state or implement any class methods.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Yeah this what I'm looking for. Thank you so much!
1

use eslint's react plugin https://www.npmjs.com/package/eslint-plugin-react and set react/prefer-stateless-function to true in your eslint config

Improve this answer

2 Comments

Thank you for your answer. But the prefer-stateless-function lint only warning with stateless component. I want the warning also display with stateful component as well. Because I want 100% of my components are written in functions with hooks
Maybe this will help npmjs.com/package/eslint-plugin-no-class

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.