Is this spread neccessary?

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?

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

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!

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

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

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.

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.

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.

@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?

@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.

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

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?

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.

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

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};