Skip to content
small-rules

Require React Display Names

Error
small-rules/require-react-display-names

Require displayName on exported memo components and contexts.

Diagnostic Messages

directContextExport
Directly exporting createContext() result prevents setting displayName.
directMemoExport
Directly exporting memo() result prevents setting displayName.
missingContextDisplayName
Context '{{variableName}}' must have a displayName assigned.
missingMemoDisplayName
Memo component '{{variableName}}' must have a displayName assigned.

Configuration

This rule accepts one options object after the severity.

environmentOptional

The React environment: 'roblox-ts' uses @rbxts/react, 'standard' uses react.

Type
"roblox-ts" | "standard"
Default
roblox-ts
{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/require-react-display-names": [
      "error",
      {
        "environment": "roblox-ts"
      }
    ]
  }
}

Examples

Memo export without display name
import { memo } from "@rbxts/react";


function ComponentNoMemo() {
    return <div />;
}


export default memo(ComponentNoMemo);
Memo export with display name
import { memo } from "@rbxts/react";


function ChecklistClaimButtonNoMemo() {
    return <div />;
}


export const ChecklistClaimButton = memo(ChecklistClaimButtonNoMemo);
ChecklistClaimButton.displayName = "ChecklistClaimButton";
export default ChecklistClaimButton;
Ban React FcRelatedBoth protect React debug/profile identity: ban FC types, require displayName on memo/context exports.