javascript - What are the benefits of immutability? -

i'm using react render long scrollable list of items (+1000). found react virtualized me this.

so looking @ example here should pass down list prop item list component. what's tripping me in example list immutable (using immutable.js) guess makes sense since that's how props supposed work - if want make change row item cannot change state since row rerendered using list, throwing out state.

what i'm trying highlight row when click , have still highlighted if scroll out of view , again. if list not immutable can change object representing row , highlighted row stay highlighted, i'm not sure that's correct way it. there solution other mutating props?

class itemslist extends react.component {   (...)   render() {     (...)         return(       <div>         <virtualscroll           ref='virtualscroll'           classname={styles.virtualscroll}           height={virtualscrollheight}           overscanrowcount={overscanrowcount}           norowsrenderer={this._norowsrenderer}           rowcount={rowcount}           rowheight={usedynamicrowheight ? this._getrowheight : virtualscrollrowheight}           rowrenderer={this._rowrenderer}           scrolltoindex={scrolltoindex}           width={300}         />       </div>     )   }   _rowrenderer ({ index }) {     const { list } = this.props;     const row = list[index];      return (       <row index={index} />     )   } }   class row extends react.component {   constructor(props) {     super(props);      this.state = {       highlighted: false     };   }    handleclick() {     this.setstate({ highlighted: true });      list[this.props.index].color = 'yellow';   }    render() {     let color = list[this.props.index].color;      return (       <div          key={this.props.index}         style={{ height: 20, backgroundcolor: color }}         onclick={this.handleclick.bind(this)}         >         row {this.props.index}       </div>     )   }   }  const list = [array of 1000+ objects];  reactdom.render(   <itemslist     list={list}    />,   document.getelementbyid('app') ); 

if render let's 10 out of list of 1000 @ time, way remember highlighted-flag, store in parent state, list of 1000.

without immutability, like:

// make copy of list - nb: not copy objects in list var list = this.state.list.slice();     // when changing object, directly mutating state list[itemtochange].highlighted = true;  // setting state trigger re-render this.setstate({ list: list }); // damage done:  // e.g. shouldcomponentupdate lifecycle method fail // return false, if state did change. 

with immutability, doing quite similar:

// make copy of list var list = this.state.list.slice(); // make copy of object update var newobject = object.assign({}, list[itemtochange]); // update object copy newobject.highlighted = true; // insert new object list copy list[itemtochange] = newobject; // update state new list this.setstate({ list : list ); 

the above works if object not contain more nested objects.
not familiar immutable.js, i'm sure have excellent methods deal more appropriately.

the argument immutability in react can reliably , transparently work state changes (also react's life-cycle methods expect them). there numerous questions on variant of "why nextstate == this.state", answers coming down "not keeping state , props immutable screwed things up"