# NO_UNNECESSARY_PROP_SPREADING

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.

## Examples

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.

```tsx filename="app/dashboard/page.tsx" {2}
function HomePage() {
  return <Header {...{ foo }}>Hello World</Header>;
}

export default HomePage;
```

## How to fix

You can remove the spread operator from the JSX component, and list all props explicitly.

```tsx filename="app/dashboard/page.tsx" {2}
function HomePage() {
  return (
    <Header bar={foo.bar} baz={foo.baz}>
      Hello World
    </Header>
  );
}

export default HomePage;
```

In the example above, [TypeScript](https://www.typescriptlang.org/) will be able to type-check all props.


--------------------------------------------------------------------------------
title: "NO_VARIABLE_IMPORT_REFERENCES"
description: "import and require statements must be passed string literals to avoid arbitrary user access to code."
last_updated: "2026-02-03T02:58:39.477Z"
source: "https://vercel.com/docs/conformance/rules/NO_VARIABLE_IMPORT_REFERENCES"
--------------------------------------------------------------------------------