Needless Patchouli Manufacture

    eslint-plugin-react-prefer-function-component
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    eslint-plugin-react-prefer-function-component

    An [ESLint](https://github.com/eslint/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 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.

    FAQ

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

    Yes it does. Error Boundaries are implemented by defining componentDidCatch. Because there is currently no hook equivalent, class components that implement componentDidCatch 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 📦

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

    .eslintrc configuration:

    module.exports = {
      plugins: ["react-prefer-function-component"],
      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",
          { allowComponentDidCatch: 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

    ...
    "prefer-function-component": [<enabled>, { "allowComponentDidCatch": <allowComponentDidCatch> }]
    ...
    • enabled: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.
    • allowComponentDidCatch: optional boolean set to true if you would like to ignore class components using componentDidCatch (default to true).

    allowComponentDidCatch

    When true (the default) the rule will ignore components that use componentDidCatch

    Examples of correct code for this rule:

    import { Component } from "react";
    
    class Foo extends Component {
      componentDidCatch(error, errorInfo) {
        logErrorToMyService(error, errorInfo);
      }
    
      render() {
        return <div>{this.props.foo}</div>;
      }
    }

    When false the rule will also flag components that use componentDidCatch

    Examples of incorrect code for this rule:

    import { Component } from "react";
    
    class Foo extends Component {
      componentDidCatch(error, errorInfo) {
        logErrorToMyService(error, errorInfo);
      }
    
      render() {
        return <div>{this.props.foo}</div>;
      }
    }

    Contributing 👫

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

    Licensing 📃

    See the project's MIT License.

    Install

    npm i eslint-plugin-react-prefer-function-component

    DownloadsWeekly Downloads

    19,937

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    12 kB

    Total Files

    7

    Last publish

    Collaborators

    • tatethurston