no-key-after-spread
Prevent patterns that cause deoptimization when using the automatic JSX runtime.
Full Name in eslint-plugin-react-jsx
react-jsx/no-key-after-spreadFull Name in @eslint-react/eslint-plugin
@eslint-react/jsx-no-key-after-spreadPresets
jsx
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
When using the JSX automatic runtime, key is a special prop in the JSX transform. See the Babel REPL and the TypeScript Playground.
If the key prop is before any spread props, it is passed as the key argument of the _jsx / _jsxs / _jsxDev function. But if the key prop is after spread props, the compiler falls back to createElement instead, which extracts key from the props object at runtime. The semantics stay the same — key is still not passed to the component as a regular prop — but the element loses the compile-time optimization of the automatic runtime.
Note that spreading a key from an object is discouraged: RFC #107: Deprecate spreading key from objects proposes deprecating this pattern, and React already warns about spread keys in development.
Examples
Using key after spread props
// 🔴 Problem: The 'key' prop must be placed before any spread props when using the new JSX transform.
<div {...props} key="2" />;Using key before or without spread props
// 🟢 Recommended: 'key' placed before spread props
<div key="1" {...props} />;
// 🟢 Recommended: 'key' without spread props
<div key="3" className="" />;
// 🔵 OK: 'key' can also appear after regular props
<div className="" key="3" />;