Why does array state item using hooks only updates component when using spread?

Question

I don't understand why a component only re-renders when using spread operator in an array state item as follows:

I first create a dynamic array state with false values:

const [openList, setOpenList] = React.useState(props.navBarItems.map((item, index) => false));

Option 1

function handleClick(index) {
       let newOpenList = [...openList]
       newOpenList[index] = !openList[index]
       console.log(newOpenList) // prints the same in both options
       setOpenList(newOpenList);

}

Option 2:

function handleClick(index) {
       let newOpenList = openList
       newOpenList[index] = !openList[index]
       console.log(newOpenList) // prints the same in both options
       setOpenList(newOpenList);
}

I used a console.log in render() (there's probably a better way to know if component updated using hooks) and it is only called when using option 1.

Option 2 will not cause a re-render because you're doing a state-mutation. ie:, you are not creating a new state object, and you are just making updates to the existing object in reference. Components only re-render when you provide a brand-new state, which is what you're doing with the spread operator. You're creating a brand-new array and then setting-state with that new array which is a valid state update. — Cat_Enthusiast
– Cat_Enthusiast, Commented Jul 16, 2019 at 4:30
In the second one, the new array is a modified version of the original. So when setState determines if it needs to rerender it sees that it’s the same object and doesn’t do anything — Jake Luby
– Jake Luby, Commented Jul 16, 2019 at 4:34
@ChristopherNgo you are right, the thing is that: "In JavaScript, arrays and objects are reference types. This means that when a variable is assigned an array or object, what gets assigned to the variable is a reference to the location in memory where the array or object was stored." freecodecamp.org/news/… — Murilo Botelho
– Murilo Botelho, Commented Jul 16, 2019 at 4:40

aquilesb · Accepted Answer · 2019-07-16 04:37:35Z

1

Because on option 2 you are mutating the openList array. When you do let newOpenList = openList you are not creating a new variable, you are just assigning openList to newOpenList. Even after adding one more item to newOpenList, when react compare the oldOpenList === openList this return true, and react does not update.

On option 1, when you do [...openList] it creates a new array with the same items of openList. As it will be a new variable, when react compares oldOpenList === openList it returns false, and react update.

You can have a more completed answer about that here

answered Jul 16, 2019 at 4:37

aquilesb

2,2721 gold badge20 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Murilo Botelho Over a year ago

You are right, the thing is that: "In JavaScript, arrays and objects are reference types. This means that when a variable is assigned an array or object, what gets assigned to the variable is a reference to the location in memory where the array or object was stored." freecodecamp.org/news/…

Collectives™ on Stack Overflow

Why does array state item using hooks only updates component when using spread?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related