NO_UNNECESSARY_PROP_SPREADING
Disallows the usage of object spreading in a JSX component.Conformance is available on Enterprise plans
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.
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.
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.
Was this helpful?