Skip to content
small-rules

Prefer Hoisted JSX Elements

Suggestion
small-rules/prefer-hoisted-jsx-elements

Prefer extracting static JSX elements to module-level constants.

Diagnostic Messages

hoistableJsxElement
Extract `{{elementText}}` to a shared module-level const — this JSX element is fully static and identical elements should reuse the same const.

Configuration

This rule accepts one options object after the severity.

additionalHoistableComponentsOptional

Additional component names that can be hoisted to module-level constants.

Type
Array<string>
Default
-
additionalStaticFactoriesOptional

Additional factory functions whose return values are considered static.

Type
Array<string>
Default
-
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/prefer-hoisted-jsx-elements": [
      "error",
      {
        "additionalHoistableComponents": [
          "IconSprite"
        ],
        "additionalStaticFactories": [
          "Vector3"
        ],
        "environment": "roblox-ts"
      }
    ]
  }
}

Examples

Inline static JSX element
function View() {
  return <staticbadge />;
}
Dynamic component element
function View() {
  return <Component enabled={true} />;
}
Prefer Hoisted Jsx Object PropertiesRelatedWhole static elements and static prop objects are the two halves of JSX hoistability.No Static React Create ElementRelatedStatic createElement should be JSX; static JSX trees should then be hoisted when fully constant.