oxc-project/oxc · warning · OxcDiagnostic

Component definition is missing display name.

Error message

Component definition is missing display name.

What it means

Diagnostic from the oxlint rule `react/display-name` (plugin `react`, category `pedantic`). It fires for components whose name React DevTools cannot infer: components created through HOC-style calls (`React.memo`, `forwardRef`, connect-style wrappers - detected via `is_hoc_call` with memo/forwardRef handling gated on the configured React version from settings), object-property/arrow components, and - with `checkContextObjects: true` - context objects from React >= 16.3. Without `displayName`, such components render as 'Unknown' or 'Memo' in DevTools, hurting debugging. The `ignoreTranspilerName` option additionally requires `displayName` even when the transpiler could infer a name from the assignment. The help text says exactly what to add: a `displayName` property.

Source

Thrown at crates/oxc_linter/src/rules/react/display_name.rs:30

use oxc_ecmascript::PropName;
use oxc_macros::declare_oxc_lint;
use oxc_semantic::{AstNode, Reference, SymbolId};
use oxc_span::{GetSpan, Span};
use oxc_str::CompactStr;

use crate::{
    ast_util::iter_outer_expressions,
    config::ReactVersion,
    context::LintContext,
    rule::{DefaultRuleConfig, Rule},
    utils::{
        InnermostFunction, arrow_function_returns, expression_returns,
        find_innermost_function_with_jsx, function_returns, is_hoc_call, is_react_component_name,
    },
};

fn component_display_name_diagnostic(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("Component definition is missing display name.")
        .with_help("Add a `displayName` property to the component.")
        .with_label(span)
}

fn context_display_name_diagnostic(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("Context definition is missing display name.")
        .with_help("Add a `displayName` property to the context.")
        .with_label(span)
}

declare_oxc_lint!(
    /// ### What it does
    ///
    /// Enforces that React components have a `displayName` property.
    ///
    /// ### Why is this bad?
    ///
    /// React DevTools uses `displayName` to show component names in the component tree.

View on GitHub (pinned to e1e7af627c)

Solutions

1. Assign a display name after creation: `Panel.displayName = 'Panel'`
2. Name the inner component so the wrapper can infer it: `const Base = () => <div />; const Panel = React.memo(Base)`
3. If DevTools naming is not a concern for wrapper internals, disable the rule or scope it with overrides
4. For context objects, set `Ctx.displayName = 'MyCtx'` or turn off `checkContextObjects`

Example fix

// before
const Panel = React.memo(function () {
  return <div>Hello</div>
})

// after
const Panel = React.memo(function () {
  return <div>Hello</div>
})
Panel.displayName = 'Panel'

npx oxlint --react/display-name src/

When it happens

Trigger: `const Panel = React.memo(() => <div />)`; `export default connect(mapState)(Comp)` style HOC chains; object methods returning JSX assigned into an object; `{ checkContextObjects: true }` with bare `createContexx`-style context objects (React >= 16.3).

Common situations: Redux/React-Redux `connect` wrappers; memoized or forwardRef components showing as 'Anonymous'/'Memo' in the DevTools tree; component factory functions; teams adding the react plugin wholesale during an oxlint migration.

Related errors

• `button` elements must have an explicit `type` attribute.
• `button` elements must have a valid `type` attribute.
• `checked` should be used with either `onChange` or `readOnly
• Use either `checked` or `defaultChecked`, but not both.
• Invalid handler name: {handler_name}

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