eslint-plugin-react-prefer-function-component

An ESLint plugin that prevents the use of React class components.

What is this? 🧐

An ESLint plugin that prevents the use of React class components. While this plugin specifically calls out React, it will work with Preact, Inferno, or other JSX libraries.

Motivation

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 or static getDerivedStateFromError are allowed because there is currently no hook alternative for React. This is configurable via allowErrorBoundary.

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

FAQ

What about ErrorBoundary class components? Does this lint rule support those?

Yes it does. Error Boundaries are implemented by defining static getDerivedStateFromError or componentDidCatch. Because there is currently no hook equivalent, class components that implement componentDidCatch or static getDerivedStateFromError are allowed by default.

This option is configurable.

What about eslint-plugin-react/prefer-stateless-function?

eslint-plugin-react/prefer-stateless-function allows class components that implement any methods or properties other than render. This rule is stricter and prevents the use of any class components. This open issue explains the limitations of prefer-stateless-function and the motivations for this plugin.

Why didn't you contribute this rule to https://github.com/yannickcr/eslint-plugin-react?

I'm discussing this in an open issue and pull request on eslint-plugin-react. At this time, the maintainer of eslint-plugin-react is unconvinced that function component enforcement should be a lint rule. If you would like to see this rule added to eslint-plugin-react, please join the discussion on the issue or pull request.

Installation & Usage 📦

1. Install:

$ npm install eslint eslint-plugin-react-prefer-function-component --save-dev

2. Update your eslint.config.js:

import eslint from "@eslint/js";
import reactRecommended from "eslint-plugin-react/configs/recommended.js";
import preferFunctionComponent from "eslint-plugin-react-prefer-function-component/config";

export default [
  { files: ["**/*.{js,jsx}"] },
  eslint.configs.recommended,
  reactRecommended,
  preferFunctionComponent.configs.recommended,
];

ESLint Legacy Configuration

.eslintrc.js configuration:

module.exports = {
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: ["plugin:react-prefer-function-component/recommended"],
};

Or customize:

module.exports = {
  plugins: ["react-prefer-function-component"],
  rules: {
    "react-prefer-function-component/react-prefer-function-component": [
      "error",
      { allowErrorBoundary: false },
    ],
  },
};

For more configuration examples, take a look at the examples directory.

Rule Details

This rule will flag any React class components that don't use componentDidCatch.

Examples of incorrect code for this rule:

import { Component } from "react";

class Foo extends Component {
  render() {
    return <div>{this.props.foo}</div>;
  }
}

Examples of correct code for this rule:

function Foo(props) {
  return <div>{props.foo}</div>;
}

const Foo = ({ foo }) => <div>{foo}</div>;

Rule Options

...
"react-prefer-function-component": [<enabled>, { "allowErrorBoundary": <allowErrorBoundary>, "allowJsxUtilityClass": <allowJsxUtilityClass> }]
...

• enabled: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.
• allowErrorBoundary: optional boolean. set to false if you want to also flag class components that use componentDidCatch or static getDerivedStateFromError (defaults to true).
• allowJsxUtilityClass: optional boolean. set to true if you want to allow classes that contain JSX but aren't class components (defaults to false).

allowErrorBoundary

When true (the default) the rule will ignore error boundary components that use componentDidCatch or static getDerivedStateFromError

Examples of correct code for this rule:

import { Component } from "react";

class ErrorBoundary extends Component {
  componentDidCatch(error, errorInfo) {
    logErrorToMyService(error, errorInfo);
  }

  render() {
    return <div>{this.props.children}</div>;
  }
}

import { Component } from "react";

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    return <div>{this.state.hasError ? "Error" : this.props.children}</div>;
  }
}

When false the rule will also flag error boundary components

Examples of incorrect code for this rule:

import { Component } from "react";

class ErrorBoundary extends Component {
  componentDidCatch(error, errorInfo) {
    logErrorToMyService(error, errorInfo);
  }

  render() {
    return <div>{this.props.children}</div>;
  }
}

import { Component } from "react";

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    return <div>{this.state.hasError ? "Error" : this.props.children}</div>;
  }
}

allowJsxUtilityClass

When true the rule will ignore JS classes that aren't class Components

Examples of correct code for this rule:

import { Bar } from "./Bar";

class Foo {
  getBar() {
    return <Bar />;
  }
}

When false (the default) the rule will flag any class with JSX

Examples of incorrect code for this rule:

import { Bar } from "./Bar";

class Foo {
  getBar() {
    return <Bar />;
  }
}

Contributing 👫

PR's and issues welcomed! For more guidance check out CONTRIBUTING.md

Licensing 📃

See the project's MIT License.