eslint-plugin-react-prefer-function-component

tl;dr I launched eslint-plugin-react-prefer-function-component, an ESLint plugin that prevents the use of class components in JSX.

update Jun 23, 2022

We’re using eslint-plugin-react-prefer-function-component across frontends at Twitch as we standardize upon function components.

why

Since the addition of hooks, it has been possible to write stateful React components using only functions.

Leaving the choice between class or function components up to the community is great, but generally within a codebase I want consistency: either we’re writing class components and HoCs or we’re using function components and hooks. Straddling the two adds unnecessary hurdles for sharing reusable logic.

By default, class components that use componentDidCatch are enabled because there is currently no hook alternative for React. This option is configurable via allowComponentDidCatch.

This rule is intended to complement the eslint-plugin-react rule set.

the final result

eslint-plugin-react-prefer-function-component.

While this plugin specifically calls out React, it will work with Preact, Inferno, or other JSX libraries.

If you’d like to try it out, see the installation instructions.

Any questions? Hop into the Reddit announcement thread. Or, open an issue.