NO_UNNECESSARY_PROP_SPREADING
Disallows the usage of object spreading in a JSX component.Table of Contents
Conformance is available on Enterprise plans
This rule is available from version 1.6.0.
This rule detects the usage of the spread operator when spreading an object as a prop within a JSX component.
When spreading an object in the component, the data types of the object's properties are not validated, potentially causing unexpected runtime errors or unintended behavior.
In the following example, the Header
component contains an object with the spread operator being applied to it.
We don't know if the props that the Header
component reads will accept all the values contained in the foo
object.
app/dashboard/page.tsx
function HomePage() {
return <Header {...{ foo }}>Hello World</Header>;
}
export default HomePage;
You can remove the spread operator from the JSX component, and list all props explicitly.
app/dashboard/page.tsx
function HomePage() {
return (
<Header bar={foo.bar} baz={foo.baz}>
Hello World
</Header>
);
}
export default HomePage;
In the example above, TypeScript will be able to type-check all props.
Last updated on July 23, 2024
Was this helpful?