Introduction

In React code, the three dots syntax, written as ..., is just JavaScript. Depending on where it appears, it means either spread or rest, and React uses it constantly because it makes state updates, prop forwarding, and destructuring much shorter and clearer.

Spread in Objects

Object spread copies properties from one object into another.

1const user = { name: "Ava", role: "reader" };
2const updatedUser = { ...user, role: "admin" };
3
4console.log(updatedUser);

The result is a new object containing all previous properties, with role overridden. In React, this is extremely common for immutable state updates.

1setFormData(prev => ({
2  ...prev,
3  email: "[email protected]"
4}));

That pattern keeps all existing fields while replacing only one property.

Spread in Arrays

Array spread copies elements into a new array.

1const items = ["a", "b"];
2const nextItems = [...items, "c"];
3
4console.log(nextItems);

In React, this is a standard way to update list state without mutating the old array.

setItems(prev => [...prev, newItem]);

You can also merge arrays this way:

const allItems = [...featuredItems, ...regularItems];

Spread in JSX Props

One of the most recognizable React uses is prop spreading.

function Button(props) {
  return <button {...props} />;
}

This forwards every property from props to the actual DOM element. It is useful for wrapper components that want to preserve standard DOM behavior.

A more realistic example is:

1function PrimaryButton({ children, ...rest }) {
2  return (
3    <button className="primary" {...rest}>
4      {children}
5    </button>
6  );
7}

Here children is handled explicitly and the remaining props are passed through.

Rest in Destructuring

When ... appears on the left side of destructuring, it means rest. It gathers the remaining values into one object or array.

1function Card({ title, subtitle, ...rest }) {
2  return (
3    <section {...rest}>
4      <h2>{title}</h2>
5      <p>{subtitle}</p>
6    </section>
7  );
8}

title and subtitle are pulled out, while rest contains everything else.

The same idea works in function parameters:

1function logAll(...values) {
2  console.log(values);
3}
4
5logAll(1, 2, 3);

Here rest collects many arguments into an array.

Spread vs Rest

A simple way to remember the difference is:

• spread expands outward
• rest gathers inward

Examples:

• object literal or array literal: usually spread
• JSX prop block: spread
• function arguments collected into one variable: rest
• destructuring “the rest of the props”: rest

The syntax is identical, but the direction of data flow tells you which meaning applies.

Why React Uses It So Often

React encourages:

• immutable state updates
• reusable wrapper components
• explicit prop destructuring

Spread and rest fit those patterns naturally. They reduce boilerplate and make intent visible.

For example, updating nested state or forwarding props without ... would require much more repetitive code. That is why you see the syntax so often in component code.

Shallow Copy Warning

The most important caveat is that spread is shallow. If an object contains nested objects, the nested values are still shared unless you copy those levels too.

1const state = {
2  user: { name: "Ava" },
3  theme: "dark"
4};
5
6const nextState = { ...state };

nextState.user still points to the same nested object as state.user. That surprises many developers the first time they update nested state.

Common Pitfalls

• Forgetting that spread only makes a shallow copy, not a deep clone of nested data.
• Spreading props blindly into DOM elements and unintentionally passing invalid or unwanted attributes.
• Misreading rest syntax as spread when it appears on the left side of destructuring.
• Putting prop spreads in the wrong order, which changes which values win when keys conflict.
• Using spread everywhere by habit instead of deciding whether a more explicit prop API would be clearer.

Summary

• In React, ... is normal JavaScript syntax used as either spread or rest.
• Spread copies or expands object properties, array elements, and JSX props.
• Rest gathers remaining props or function arguments into one value.
• React uses it heavily for immutable state updates and prop forwarding.
• The biggest caveat is that spread is shallow, so nested objects still need special care.