JSX Spread Attributes

JSX spread attributes let you expand an object’s properties into JSX props with `{...object}`. They are useful for forwarding or composing groups of props, but explicit props and property order determine which values win.

A JSX spread attribute uses JavaScript spread syntax inside an opening tag, such as `<Button {...props} />`. Each enumerable property from the object is supplied as a prop to the component, using the property's key as the prop name.

Spread syntax can be combined with ordinary JSX attributes. The order matters: when multiple supplied props use the same key, a later value replaces an earlier one. For example, `<Button {...props} disabled />` makes the explicit `disabled` value take precedence over a `disabled` property from `props`.

A component receives the resulting props as one object, just as it would with individually written attributes. Spreading does not mean the component receives the original object as a special value; its properties become entries in the props object.

Spread props are especially useful for prop forwarding, wrapper components, and reusable configuration objects. They should be used deliberately because they can make it less obvious which props a component receives and can accidentally forward unsupported or sensitive properties.

Key points

• `{...props}` expands object properties into JSX props.
• Later attributes override earlier values with the same prop name.
• A component receives the expanded values through its normal props object.
• Spread props are useful for forwarding and composing props.
• Avoid spreading uncontrolled objects when explicit prop boundaries improve clarity.

Interview questions

What does `<Component {...props} />` do?

It takes the properties of `props` and supplies them to `Component` as JSX props. A property such as `props.name` becomes a prop named `name`. The component still receives an ordinary props object. It is essentially a concise way to pass multiple known object properties without listing them individually.

What happens when explicit props and spread props contain the same property?

The later value takes precedence. For example, `<Input {...props} disabled />` uses the explicit `disabled` value rather than `props.disabled`. Conversely, `<Input disabled {...props} />` allows the spread value to replace the earlier explicit value if `props.disabled` exists. This makes the position of the spread significant.

When would you use JSX spread attributes in a React component?

A common use is forwarding props through a wrapper component to an underlying component or DOM element. They can also make reusable configuration objects convenient to pass. However, I would avoid blindly forwarding large objects because the component's accepted inputs become less visible. Explicit props are often clearer when only a few values are involved.

How is JSX spread different from JavaScript object spread?

Both use the spread operator syntax, but they operate in different syntactic contexts. Object spread copies properties into a new JavaScript object, while JSX spread supplies properties as attributes for a JSX element or component. For example, `{...a, ...b}` constructs an object, whereas `<Widget {...a} {...b} />` supplies props to `Widget`. In both cases, later duplicate properties can override earlier ones.

What should you consider before forwarding all props to a DOM element?

The source object may contain properties that are not intended for the DOM element. Forwarding arbitrary values can produce warnings, unexpected attributes, or an unclear component interface depending on the framework and element. A wrapper can instead destructure the props it consumes and forward only the remaining appropriate props. This creates a clearer boundary between component-specific props and native element props.