React array update

Question

Working on reactJS project, and I know we don't mutate the state (usually i don't but don't know the exact reason) so I just tried some wrong approach even its working correctly.

import logo from './logo.svg';
import './App.css';
import Test from './test';
import {Home, NotFoundComponent,Contact, Profile} from './test/home'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import React, {Component} from 'react';


class App extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      list: [42, 33, 68],
    };
  }
 
  onUpdateItem = i => {
    this.state.list[i]++;
    this.setState({
      list: this.state.list,
    })

    // this.setState(state => {
    //   const list = state.list.map((item, j) => {
    //     if (j === i) {
    //       return item + 1;
    //     } else {
    //       return item;
    //     }
    //   });
 
    //   return {
    //     list,
    //   };
    // });
  };
 
  render() {
    return (
      <div>
        <ul>
          {this.state.list.map((item, index) => (
            <li key={item}>
              The person is {item} years old.
              <button
                type="button"
                onClick={() => this.onUpdateItem(index)}
              >
                Make me one year older
              </button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}



export default App;

this.state.list[i]++;
this.setState({
  list: this.state.list,
})

what is the problem with when I update the code above instead map method, both give the correct output?

explain to me this behind the scene code sandbox link

There's nothing wrong with your approach unless if your state is immutable. But be careful when you're working with reference types. But if you've children which dependent on parent list, it doesn't update the children. — Naren
– Naren, Commented Oct 25, 2020 at 3:27
cause both ref type is equal and content only differ so child cant recognizes It correct? — Selva Ganapathi
– Selva Ganapathi, Commented Oct 25, 2020 at 3:33
I have created a example here. Check this out stackblitz.com/edit/react-wt5tf4?file=src%2FChild.js — Naren
– Naren, Commented Oct 25, 2020 at 4:07
bro, which react part knows both refs is same so we don't need to update UI, is render() or shoulcomponemtUpdate() life cycle — Selva Ganapathi
– Selva Ganapathi, Commented Oct 25, 2020 at 15:11

Guichi · Accepted Answer · 2020-10-25 03:33:24Z

1

Here is the reason:

When you mutate an array, say list[i]++ the identity of the array is not changed so listBefore ==== listAfter, while you map over the array listBefore !== listAfter, when you invoke setState, ALL the children component will be invoked again by default even if you put nothing inside setState. Because react can not tell if the children update is necessary by default and it is a waste of resources actually.

You can prevent this from happening by telling the Children "Do NOT update" by calling shouldComponentUpdate or simply use PureComponent.

And the way to tell if updates are necessary is to compare using ===

In addition, Even if you do not care about performance. you should never do this. It will cause some debuggable bugs in some cases mainly because the updates in react is NOT synchronized. I never encounter by the way because I do not even dare to try

edited Oct 25, 2020 at 3:33

answered Oct 25, 2020 at 3:25

Guichi

2,3531 gold badge23 silver badges32 bronze badges

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

2 Comments

Selva Ganapathi Over a year ago

if i update throgh this.state.list.map((value,index)=>{ means childern wont update?

Guichi Over a year ago

@SelvaGanapathi the children will ALWAYS update by default even if you call setState({}) (empty object), you can confirm what I say by putting console.log in children

kyun · Accepted Answer · 2020-10-25 03:36:30Z

1

When you update your state you should take care of immutable.

onUpdateItem = i => {
  //this.state.list[i]++;
  //this.setState({
  //  list: this.state.list,
  //})
  this.setState({
    list: this.state.list.map((value,index)=>{
      if(i === index) return value+1;
      return value;
    })
  });
}

If you are not maintaining immutable, your app will not work what you expected.

React states are updated follow life-cycle. if without immutability, it means you are breaking the life-cycle.

edited Oct 25, 2020 at 3:36

answered Oct 25, 2020 at 3:24

kyun

10.4k9 gold badges36 silver badges79 bronze badges

2 Comments

Selva Ganapathi Over a year ago

I know, what if i am not maintaining immutable?

Guichi Over a year ago

He asked why and you told him how

Collectives™ on Stack Overflow

React array update

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related