no-class-component

Rule category

Restriction.

What it does

Prevents the use of class component in React.

Why is this bad?

Component is the base class for the React components defined as JavaScript classes. Class components are still supported by React, but we don’t recommend using them in new code.

It is recommended to define components as functions instead of classes. See how to migrate.

Examples

This rule aims to prevent usage of class components in React.

Failing

import React from "react";
 
interface ExampleProps {
  ExampleProps.name: stringname: string;
}
 Do not use class components
class class ExampleExample extends React.class React.Component<P = {}, S = {}, SS = any>Component<ExampleProps> {
  Example.render(): React.JSX.Elementrender() {
    return <JSX.IntrinsicElements.h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>h1>Hello, {this.React.Component<ExampleProps, {}, any>.props: Readonly<ExampleProps>props.name: stringname}!</JSX.IntrinsicElements.h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>h1>;
  }
}

Passing

import React from "react";
 
interface ExampleProps {
  ExampleProps.name: stringname: string;
}
 Use function components instead
function function Example({ name }: ExampleProps): React.JSX.ElementExample({ name: stringname }: ExampleProps) {
  return <JSX.IntrinsicElements.h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>h1>Hello, {name: stringname}!</JSX.IntrinsicElements.h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>h1>;
}