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.
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.
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” />;
}