oxc-project/oxc · error · OxcDiagnostic

Class component should be written as a function component.

Error message

Class component should be written as a function component.

What it means

Raised by react/prefer_function_component when a class component (a class extending React.Component/PureComponent that renders JSX, detected via function_contains_jsx/expression_contains_jsx heuristics) is encountered. At the throw site the component carries no instance features that require a class (the rule targets classes that only render), and the project style mandates function components; classes also block hooks and add overhead. prefer_function_component_diagnostic fires from run() on each qualifying class node.

Source

Thrown at crates/oxc_linter/src/rules/react/prefer_function_component.rs:20

use serde::Deserialize;

use oxc_ast::{
    AstKind,
    ast::{Class, ClassElement},
};
use oxc_diagnostics::OxcDiagnostic;
use oxc_macros::declare_oxc_lint;
use oxc_span::Span;

use crate::{
    AstNode,
    context::{ContextHost, LintContext},
    rule::{DefaultRuleConfig, Rule},
    utils::{expression_contains_jsx, function_contains_jsx, is_es6_component},
};

fn prefer_function_component_diagnostic(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("Class component should be written as a function component.")
        .with_help("Convert the class component to a function component.")
        .with_note("See https://react.dev/reference/react/Component#migrating-a-simple-component-from-a-class-to-a-function")
        .with_label(span)
}

#[derive(Debug, Clone, JsonSchema, Deserialize)]
#[serde(rename_all = "camelCase", default, deny_unknown_fields)]
pub struct PreferFunctionComponent {
    /// If `true`, error boundary classes (those implementing `componentDidCatch`
    /// or `static getDerivedStateFromError`) are allowed as class components.
    ///
    /// This is because these classes are not easily converted to function components,
    /// and so they are exempted from this rule by default.
    allow_error_boundary: bool,
    /// If `true`, classes that contain JSX but do not extend `Component` or
    /// `PureComponent` are allowed.
    allow_jsx_utility_class: bool,
}

View on GitHub (pinned to e1e7af627c)

Solutions

1. Convert the class to a function component using hooks where needed.
2. Disable the rule for classes that will gain lifecycle logic later.

When it happens

Trigger: Thrown at crates/oxc_linter/src/rules/react/prefer_function_component.rs:20 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of oxc-project/oxc@e1e7af627c (2026-08-20). Data as JSON: /api/errors/0546f7708f6bf7c8. Report an issue: GitHub.