no-implicit-key
Prevents implicitly passing the 'key' prop to components.
This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.
Full Name in eslint-plugin-react-x
react-x/no-implicit-keyFull Name in @eslint-react/eslint-plugin
@eslint-react/no-implicit-keyFeatures
💭 🧪
Rule Details
This makes it hard to see whether the key was passed correctly to the element or where it came from.
It is also proposed to be deprecated in this RFC: Deprecate spreading key from objects.
The following cases are allowed and will not be reported:
- The
keyproperty originates from React's own type definitions (ex:React.Attributes.key), such as when spreadingReact.ComponentProps<"div">,React.HTMLAttributes<T>, or similar React-provided types. - The
keyproperty's type isReact.Key, even if the property is declared in a user-defined type.
Examples
Implicitly passing key via the spread operator
Spreading an object that contains key directly onto a component makes the source and purpose of key unclear.
import React from "react";
declare let someValues: { foo: string; bar: string; key: string };
// Problem: Implicitly passing key when spreading an object
function MyComponent() {
return <div {...someValues} />;
}import React from "react";
declare let someValues: { id: string; className: string; key: string };
// Recommended: Explicitly destructure and pass key
function MyComponent() {
const { key, ...rest } = someValues;
return <div key={key} {...rest} />;
}key type is React.Key
When the key type is the React built-in React.Key, spreading is allowed.
import React from "react";
declare let someValues: { id: string; className: string; key: React.Key };
// OK: key type is React.Key, which is a React built-in type
function MyComponent() {
return <div {...someValues} data-slot="pagination-item" />;
}Spreading React built-in component props
When spreading props from React built-in types (such as React.ComponentProps), the key originates from React's type definitions and is allowed.
import React from "react";
// OK: props come from React.ComponentProps, key originates from React.Attributes
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
return <li data-slot="pagination-item" {...props} />;
}Versions
Resources
Further Reading
See Also
react-x/no-implicit-children
Prevents implicitly passing thechildrenprop to components..react-x/no-implicit-ref
Prevents implicitly passing therefprop to components..