{"record":{"id":"10e4e56837b63c10","repo":"oxc-project/oxc","slug":"component-definition-is-missing-display-name","errorCode":null,"errorMessage":"Component definition is missing display name.","messagePattern":"Component definition is missing display name\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/react/display_name.rs","lineNumber":30,"sourceCode":"use oxc_ecmascript::PropName;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_semantic::{AstNode, Reference, SymbolId};\nuse oxc_span::{GetSpan, Span};\nuse oxc_str::CompactStr;\n\nuse crate::{\n    ast_util::iter_outer_expressions,\n    config::ReactVersion,\n    context::LintContext,\n    rule::{DefaultRuleConfig, Rule},\n    utils::{\n        InnermostFunction, arrow_function_returns, expression_returns,\n        find_innermost_function_with_jsx, function_returns, is_hoc_call, is_react_component_name,\n    },\n};\n\nfn component_display_name_diagnostic(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Component definition is missing display name.\")\n        .with_help(\"Add a `displayName` property to the component.\")\n        .with_label(span)\n}\n\nfn context_display_name_diagnostic(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Context definition is missing display name.\")\n        .with_help(\"Add a `displayName` property to the context.\")\n        .with_label(span)\n}\n\ndeclare_oxc_lint!(\n    /// ### What it does\n    ///\n    /// Enforces that React components have a `displayName` property.\n    ///\n    /// ### Why is this bad?\n    ///\n    /// React DevTools uses `displayName` to show component names in the component tree.","sourceCodeStart":12,"sourceCodeEnd":48,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/react/display_name.rs#L12-L48","documentation":"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.","triggerScenarios":"`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).","commonSituations":"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.","solutions":["Assign a display name after creation: `Panel.displayName = 'Panel'`","Name the inner component so the wrapper can infer it: `const Base = () => <div />; const Panel = React.memo(Base)`","If DevTools naming is not a concern for wrapper internals, disable the rule or scope it with overrides","For context objects, set `Ctx.displayName = 'MyCtx'` or turn off `checkContextObjects`"],"exampleFix":"// before\nconst Panel = React.memo(function () {\n  return <div>Hello</div>\n})\n\n// after\nconst Panel = React.memo(function () {\n  return <div>Hello</div>\n})\nPanel.displayName = 'Panel'","handlingStrategy":"validation","validationCode":"npx oxlint --react/display-name src/","typeGuard":null,"tryCatchPattern":null,"preventionTips":["After wrapping with `memo`/`forwardRef`/`connect`, add `Foo.displayName = 'Foo'` when DevTools shows Anonymous/Memo","Alternatively name the inner component so the name infers from the variable","Configure `ignoreTranspilerName`/`checkContextObjects` explicitly in shared config to match team debugging needs"],"tags":["react","jsx","lint","devtools","debugging","oxlint"],"backgroundTag":"react-missing-displayname","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}