What's the advantage of immutability-helper?

I write some code with immutability-helper, but I have not experience its advantage yet.

Here is some code:

case 1: process the load more of list.

 _loadMore() {
        const {page, query, filter: {title}} = this.state;
        const nextPage = page + 1;
        this._fetchData(query, nextPage).then(data => {
            const {books} = data;

            //create new ref way
            const oldBooks = this.state.books;
            const newBooks = Array.prototype.concat.apply(oldBooks, books);
            let newState =  {
                books: newBooks,
                page: nextPage
            }

            //immutable-helper way
            // let newState = update(this.state, {
            //     books: {$push: books},
            //     page: {$set: nextPage}
            // });
   
            this.setState(newState, this._refreshScroller);
        })
    }

experience: maybe update function is little convenient.

case 2: add a field to some object of list.

_toggleIntro(index) {
        //1. use immutable-helper
        const newState = update(this.state, {
            books: {$apply: books => {
                let target = books[index];
                const newTarget = update(target, {
                    showIntro: {$apply: showIntro => {
                        if(typeof showIntro === 'undefined') {   
                            return true;
                        } else {
                            return !showIntro;
                        }
                    }}
                })
                //still need es7 array/object spread property here?
                return [...books.slice(0, index), newTarget, ...books.slice(index + 1)];
            }}
        })

        // 2. use es7 object spread property to create new copy
        // const {books} = this.state;
        // const target = books[index]; 
        // const showIntro = target.showIntro;
        // const newState = {
        //     ...this.state,
        //     books: [
        //         ...books.slice(0, index),
        //         Object.assign({}, target, {showIntro: typeof showIntro === 'undefined' ? true : !showIntro}),
        //         ...books.slice(index + 1)
        //     ]
        // }
        console.log('this.state', this.state);   //both of the ways do not change the `source` data.
        console.log('newState', newState);
        this.setState(newState);
    }

experience: still, maybe update $apply, $push, $merge are convenient? You don’t have to create some temporary variable to store your new copy?

Thanks for answer.immutability-helper equal with create new copy? Am I right?

------- update: --------

Maybe $push, $set, $splice, $merge, $apply just are the packaged of CURD operator?

Like the methods ImmutableUpdatePatterns talk about?

[kolodny]

I’m not sure I understand. Changing the book object directly would change the original state object which is not something you are supposed to do. In the example I gave above, the following statements are true:

   state.books[3].showIntro === false
newState.books[3].showIntro === true
state.books[0] === newState.books[0]
state.books[1] === newState.books[1]
state.books[2] === newState.books[2]
state.books[3] !== newState.books[3]
state.books[4] === newState.books[4]

[kolodny]

It sounds like the reconciliation is probably the bottleneck, you may want to look into memoing your components or trying other react perf tricks