useReactFunctionComponents

JSX and TSX

Summary

Diagnostic Category: lint/nursery/useReactFunctionComponents
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- react
Sources:
- Same as react-prefer-function-component/react-prefer-function-component

Description

Enforce that components are defined as functions and never as classes.

React in particular allows users to create components using functions or classes. However, using functions is generally preferred. This rule enforces the use of function components.

This rule makes an exception for class components that implement componentDidCatch because there is currently no hook alternative for React. This function is typically used for defining error boundaries. It’s recommended to define your error boundary once and then reuse it across your application.

If you are using Preact, it has a useErrorBoundary hook.

Examples

Invalid

1
class Foo extends React.Component {
2
  render() {
3
    return (
4
      <div>This is a class component.</div>
5
    );
6
  }
7
}

code-block.jsx:1:1 lint/nursery/useReactFunctionComponents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Class components are not allowed. Function components are the preferred way to write components.
  
  > 1 │ class Foo extends React.Component {
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 2 │   render() {
  > 3 │     return (
  > 4 │       <div>This is a class component.</div>
  > 5 │     );
  > 6 │   }
  > 7 │ }
      │ ^
    8 │ 
  
  ℹ Refactor this into a function component.

Valid

1
function Foo() {
2
  return <div>This is a function component.</div>;
3
}

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useReactFunctionComponents": "error"
6
      }
7
    }
8
  }
9
}