Require React Component Keys

Error

small-rules/require-react-component-keys

Require keys on nested React JSX children, fragments, and configured iteration or memoization contexts.

Diagnostic Messages

missingKey

JSX element in list/callback lacks key prop. React Luau warns about missing keys in _G.__DEV__ mode. Add a unique `key` prop using a stable identifier (not array index).

rootComponentWithKey

Root return has unnecessary key prop. The key gets overwritten by the parent anyway. Remove the `key` prop.

Configuration

This rule accepts one options object after the severity.

allowRootKeysOptional

Allow key props on root component returns

Type

boolean

Default

false

ignoreCallExpressionsOptional

Function calls where JSX arguments don't need keys

Type

Array<string>

Default

4 ignore call expressions

iterationMethodsOptional

Array method names that indicate iteration contexts where keys are required

Type

Array<string>

Default

10 iteration methods

memoizationHooksOptional

Hook names that indicate memoization contexts where keys are required

Type

Array<string>

Default

2 memoization hooks

{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/require-react-component-keys": [
      "error",
      {
        "allowRootKeys": false,
        "ignoreCallExpressions": [
          "ReactTree.mount",
          "CreateReactStory",
          "createReactStory",
          "createPlatformStory"
        ],
        "iterationMethods": [
          "map",
          "filter",
          "forEach",
          "flatMap",
          "reduce",
          "reduceRight",
          "some",
          "every",
          "find",
          "findIndex"
        ],
        "memoizationHooks": [
          "useCallback",
          "useMemo"
        ]
      }
    ]
  }
}

Examples

Fragment children without keys

function Bad1() {
    return (
        <>
            <div />
            <span />
        </>
    );
}

Keyed fragment children

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