When working with props, especially in Higher Order  Components (HOC), you may find yourself needing to pass large number of props (even though prop drilling is usually not recommended, in some cases with HOC it may be the more optimal approach).

Typing out each property manager I can be very cumbersome, for this reason a new JavaScript operator syntax was introduced and it’s called the spread operator.

Let's consider a case where toit world need to you pass through multiple props. This could be as little as 2, 3 or many more. Before the spread, your would need to do this:

```javascript
const Component = ({
   value1,
   value2,
   value3,
  }) => (
  <Component
    prop1={value1}
    prop2={value2}
    prop3={value3}
  />
)
```

But with spread:

```javascript
const Component = ({
   value1,
   ...rest,
  }) => (
  <Component
   prop1={value1}
   {...rest}
  />
)
```

The above two are equivalent.

In this example we only have three props altogether, so we aren't winning too much, but imagine if you had 10-30 or even more props… 


:::info
On the risk of coming off repetitive, I'll remind that prop drilling typically comes with a number of caveats and potentially negative caveats.

:::

One thing to blow is that …rest will not contain the `value1`, since we essentially destructure it by extracting it from props and spreading the `value2` and the `value3` into the spear operator.

Spread operator can be very handy in certain situations. In this article, we will learn what it is and how to use it

What is and how to use JavaScript spread operator

Comments