Correct modification of state arrays in React.js

Question

I want to add an element to the end of a state array, is this the correct way to do it?

this.state.arrayvar.push(newelement); this.setState({ arrayvar:this.state.arrayvar }); 

I'm concerned that modifying the array in-place with push might cause trouble - is it safe?

The alternative of making a copy of the array, and setStateing that seems wasteful.

Answer 1

The React docs says:

Treat this.state as if it were immutable.

Your push will mutate the state directly and that could potentially lead to error prone code, even if you are "resetting" the state again afterwards. F.ex, it could lead to that some lifecycle methods like componentDidUpdate won’t trigger.

The recommended approach in later React versions is to use an updater function when modifying states to prevent race conditions:

this.setState(prevState => ({   arrayvar: [...prevState.arrayvar, newelement] })) 

The memory "waste" is not an issue compared to the errors you might face using non-standard state modifications.

Alternative syntax for earlier React versions

You can use concat to get a clean syntax since it returns a new array:

this.setState({    arrayvar: this.state.arrayvar.concat([newelement]) }) 

In ES6 you can use the Spread Operator:

this.setState({   arrayvar: [...this.state.arrayvar, newelement] }) 

Answer 2

Easiest, if you are using ES6.

initialArray = [1, 2, 3];  newArray = [ ...initialArray, 4 ]; // --> [1,2,3,4] 

New array will be [1,2,3,4]

to update your state in React

this.setState({   arrayvar:[...this.state.arrayvar, newelement] }); 

Learn more about array destructuring