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