# Is this spread neccessary?

**URL:** <https://forum.codewithmosh.com/t/is-this-spread-neccessary/1807>\
**Category:** React\
**Created:** [January 9, 2021, 6:28pm UTC](https://forum.codewithmosh.com/t/is-this-spread-neccessary/1807 "2021-01-09T18:28:12Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![anthonymarchull](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/anthonymarchull/32/584_2.png) [@anthonymarchull](https://forum.codewithmosh.com/u/anthonymarchull)\
**Post date:** [January 9, 2021, 6:28pm UTC](https://forum.codewithmosh.com/t/is-this-spread-neccessary/1807/1 "2021-01-09T18:28:12Z")

</div>

Hello,

I’m new to React and am following the React course which is great so far. However I was wondering if the spread on line 18 here is neccessary?

> **[9 January, 2021 6:21:50 pm - Screenshot](https://www.loom.com/i/2406eed074e24d7c8beb7401e26efe59)**
>
> Check out a screenshot I made via Loom

The reason I’m confused is because I’m already cloning the “movies” array on line 16 so why do I need to perform this additional spread?

The code seems to work fine without line 18. If someone could shed some light that would be great. Just so I understand the reasoning behind Mosh including this spread.

Thanks!

Anthony

---

<div class="post-metadata">

**Author:** ![Paraxus](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@Paraxus](https://forum.codewithmosh.com/u/Paraxus)\
**Post date:** [February 5, 2021, 4:22am UTC](https://forum.codewithmosh.com/t/is-this-spread-neccessary/1807/2 "2021-02-05T04:22:51Z")

</div>

Hello!

I am also new to React and discovered this double spread use which confuses me. Why do I need to copy already copied data? As anthonymarchull says, the code works just fine withouth the line 18.

Thank you for replies!

---

<div class="post-metadata">

**Author:** ![Augustine\_Awuori](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/augustine_awuori/32/873_2.png) [@Augustine\_Awuori](https://forum.codewithmosh.com/u/Augustine_Awuori)\
**Post date:** [February 6, 2021, 4:05pm UTC](https://forum.codewithmosh.com/t/is-this-spread-neccessary/1807/3 "2021-02-06T16:05:58Z")

</div>

This is to avoid changing the state directly. If we don’t spread, we will be changing the state directly. So we need to spread to a new object. Trust me on this

---

<div class="post-metadata">

**Author:** ![rob](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@rob](https://forum.codewithmosh.com/u/rob)\
**Post date:** [April 21, 2021, 3:45am UTC](https://forum.codewithmosh.com/t/is-this-spread-neccessary/1807/4 "2021-04-21T03:45:04Z")

</div>

I’m also confused about this. It happens again in “Calling Backend Services” video 7:

![Screen Shot 2021-04-20 at 11.43.31 PM](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/6/6b0edf2283fbfdd06decc167c8fab0eba352f6fb.png)

The spread on line 34 doesn’t seem necessary to me. When I try it without the spread and just set posts[index] to post, there are no errors indicating that the state is being updated directly and everything seems to work fine.

---

<div class="post-metadata">

**Author:** ![SAM](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/sam/32/167_2.png) [@SAM](https://forum.codewithmosh.com/u/SAM)\
**Post date:** [April 21, 2021, 4:52pm UTC](https://forum.codewithmosh.com/t/is-this-spread-neccessary/1807/5 "2021-04-21T16:52:03Z")

</div>

Mosh made a mistake here. You need to spread _before_ changing `post` in line 29 because `post` points to an object in the state (you can’t see that in the screenshot, but in the `render()` method). The spread in line 34 doesn’t make sense.

---

<div class="post-metadata">

**Author:** ![simond](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/simond/32/1441_2.png) [@simond](https://forum.codewithmosh.com/u/simond)\
**Post date:** [April 21, 2021, 5:17pm UTC](https://forum.codewithmosh.com/t/is-this-spread-neccessary/1807/6 "2021-04-21T17:17:29Z")

</div>

Regarding the double use of the spread operator (line 32 and 34), I believe that the underlying explanation is that the spread operator makes a “shallow” copy, meaning that the posts array on line 34 is a new/cloned/copied array BUT all the elements in it are still pointing to the individual posts objects in the state. That’s why it’s necessary to also override the post[index] with a copy using a second spread operator (line 34).  
Without this second spread operator on line 34, you would still be updating the state directly, which is a no-no in React.

---

<div class="post-metadata">

**Author:** ![rob](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@rob](https://forum.codewithmosh.com/u/rob)\
**Post date:** [April 21, 2021, 5:22pm UTC](https://forum.codewithmosh.com/t/is-this-spread-neccessary/1807/7 "2021-04-21T17:22:06Z")

</div>

@SAM and @simond Thank you both! My suspicion was that array made a shallow copy like @simond mentioned, but editing the post object in line 29 before the copy was really throwing me off because it’s edited before the copy.

@simond do you agree with @SAM that it’s a bug to edit the post before making a copy?

---

<div class="post-metadata">

**Author:** ![simond](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/simond/32/1441_2.png) [@simond](https://forum.codewithmosh.com/u/simond)\
**Post date:** [April 21, 2021, 5:28pm UTC](https://forum.codewithmosh.com/t/is-this-spread-neccessary/1807/8 "2021-04-21T17:28:46Z")

</div>

@rob I haven’t taken that section of the course yet, so I don’t know. @SAM indicates that there is a render function that contains critical implementation details.

---

<div class="post-metadata">

**Author:** ![SAM](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/sam/32/167_2.png) [@SAM](https://forum.codewithmosh.com/u/SAM)\
**Post date:** [April 21, 2021, 5:56pm UTC](https://forum.codewithmosh.com/t/is-this-spread-neccessary/1807/9 "2021-04-21T17:56:39Z")

</div>

When in doubt you could always insert some `console.log()`s to be sure.

---

<div class="post-metadata">

**Author:** ![rob](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@rob](https://forum.codewithmosh.com/u/rob)\
**Post date:** [April 21, 2021, 6:40pm UTC](https://forum.codewithmosh.com/t/is-this-spread-neccessary/1807/10 "2021-04-21T18:40:43Z")

</div>

> When in doubt you could always insert some `console.log()` s to be sure.

Can you clarify what you mean by this? Is there a way to use console.log to see if an object is part of the state?

---

<div class="post-metadata">

**Author:** ![SAM](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/sam/32/167_2.png) [@SAM](https://forum.codewithmosh.com/u/SAM)\
**Post date:** [April 21, 2021, 7:00pm UTC](https://forum.codewithmosh.com/t/is-this-spread-neccessary/1807/11 "2021-04-21T19:00:46Z")

</div>

If you are not sure if an operation changes the state directly you can log the state (or parts of it) before and after the operation and compare the output.

---

<div class="post-metadata">

**Author:** ![rob](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@rob](https://forum.codewithmosh.com/u/rob)\
**Post date:** [April 21, 2021, 7:31pm UTC](https://forum.codewithmosh.com/t/is-this-spread-neccessary/1807/12 "2021-04-21T19:31:45Z")

</div>

Oh! Great idea. I was thinking in a box of logging the object itself. Thanks @SAM. I will definitely try this.

---

<div class="post-metadata">

**Author:** ![Augustine\_Awuori](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/augustine_awuori/32/873_2.png) [@Augustine\_Awuori](https://forum.codewithmosh.com/u/Augustine_Awuori)\
**Post date:** [April 28, 2021, 4:33am UTC](https://forum.codewithmosh.com/t/is-this-spread-neccessary/1807/13 "2021-04-28T04:33:07Z")

</div>

I think the “post.title” isn’t part of the state, that’s why it hasn’t been spread. Posts is the part of the state, that’s why it’s being spread, hence "posts[index] = {…post};
