Sentry Answers>React>

What Do These Three Dots `...` in React Do?

What Do These Three Dots `...` in React Do?

Naveera A.

—

The Problem

You may have come across JSX code in React like this snippet:

Click to Copy
<Image {...aspects} source="img_source">

And wondered what these three dots ... are and what they do.

The Solution

These three dots are called the spread syntax or spread operator. The spread syntax is a feature of ES6, and it’s also used in React.

Spread syntax allows you to deconstruct an array or object into separate variables. Even though the syntax doesn’t look particularly meaningful when you first encounter it, spread syntax is super useful.

According to MDN:

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

This means is that you can use the array syntax in function calls, in array literals, and in object literals.

In React, you can use spread syntax to pass objects such as props without the need to pass individual values.

For example, these three components are equal:

Click to Copy
function App1() {
  return <Image width="50" height="100" source="img_source" />;
}

function App2() {
  const props = { width: "50", height: "100" };
  return (
    <Image width={props.width} height={props.height} source="img_source" />
  );
}

function App3() {
  const props = { width: "50", height: "100" };
  return <Image {...props} source="img_source" />;
}

This syntax is particularly useful when you want to pass a dynamic object and do not know beforehand which properties might be present in it.

Another popular use case of spread syntax is to copy objects or arrays. Spread operator can create a new object or array with all of the properties or elements of the existing object or array.

For example:

Click to Copy
const books = [
  { name: "War and Peace", read: true },
  { name: "Count of Monte Christo", read: true },
];

function addNewBook(newBook) {
  return [...books, { ...newBook, read: false }];
}

const updatedBookList = addNewBook({ name: "Lord of the Rings" });

In React, this comes in handy when you do not want to mutate specific data like state.

  • Sentry BlogGuide to Error & Exception Handling in React
  • Sentry BlogHow to identify fetch waterfalls in React
  • Syntax.fmReact Server Components
  • Sentry BlogSentry can’t fix React hydration errors, but it can really help you debug them
  • Syntax.fmWhy the jQuery Creator Uses React and Typescript
  • Syntax.fmListen to the Syntax Podcast
  • Sentry BlogReact Native Debugging and Error Tracking During App Development
  • Syntax.fmDiscussion on building native iOS and Android apps with React Native
  • SentryReact Error & Performance Monitoring
  • Sentry BlogFixing memoization-breaking re-renders in React
  • SentryReact Debug Hub
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark of Functional Software, Inc.