What do these three dots in React do?

This video will show you how JavaScript object spread syntax works. You will learn its use from JavaScript example and 1 example from ReactJS when passing props to components.

Full Transcript

Hello there it's Harit from bonsaiilabs. In today's video, I will explain what these three dots mean in react code base. First let's review, where in react you might see this. Right now, I have an app opened in codesandbox using official react template. I have one component called app. Within this component, I have created an object called transaction with four properties. In real world scenarios, You may get this data using an API call, but for simplicity, I have hard-coded this data here. Next up, I'm rendering H1 header called Transaction Detail, and then calling a Transaction component. Here, you see the use of these three dots (...), which we will talk about in a minute. At the bottom, I have the Transaction component, which takes four props and render them inside div using H2 tag. We can see the output on the right hand side, but all the data rendered correctly.

Cool. So let's talk about what these three dots are. These three dots come from JavaScript language. They are not something special to react. They can be used with arrays where there are known as rest elements for array destructuring assignment and spread elements for array literals. This feature was introduced in ES6 version of JavaScript, also known as ES2015. The similar feature was introduced for objects known as rest properties for object destructuring assignment and spread properties for object literals. This feature was introduced in ES9 version of the language specification also known as ES2018. But how is this feature useful? Let's take an example. I am on developer console of Brave browser, which is based on Google's chromium browser. I will create a variable called one, which refers to an object with two properties, a1 and a2 with the values of 1 and 2 respectively.

Then I create another variable called two, which contains two different properties called b1 and b2 with values of 1 and 2. Now let's say I want to merge these two objects together one and two, and want to store them in a new variable called mergeTheTwo. So how do we merge these objects? This is where the object spread syntax can help. When using this syntax, the properties from the object flatten up, which means when calling one with three dots inside curly braces, the two properties a1, and a2, will open up and become part of the surrounding object. We can perform this operation with object two as well by separating the operation by comma. This means the final mergeTheTwo object will contain four properties, two from object one and two from object two. Let's see if that is correct. As a print the object on the console, we can confirm that it is indeed the case.

So the spread syntax in object is useful to open up the object properties. Also, as you can see that this is not specific to react instead, this is coming from JavaScript language. So now let's go back to our react example and see if we can make sense of the syntax now. So when the use the spread syntax inside the component, the properties of transaction are destructured or open up in a way, and their values are assigned to the corresponding variables of the Transaction component. Please make sure that when using this syntax, the property names inside the object matches with the variable names of the component, because that's how the values are assigned. But why is that useful? It's because if you don't use this syntax, you will have to create props by yourself and pass the values to the Transaction component. That is a lot of code. If you have a lot of properties, this can easily become cumbersome work, isn't it? Using the concise spread syntax helps you write less and make code more readable. Fantastic! So hope you now have the clear idea on the three dots used inside react. If you have any questions or ideas put in the comments below, and we as a team would be happy to answer them. See you soon again.