×
  • React – The Complete Guide (incl. React Router 4 & Redux)

  • 24 – Updating State Immutably in React

    Lesson List
    [ Updating State Immutably In React, Updating State Immutably In React ]

    In the lest lesson we started removing persons. we did this by getting access to all the persons in the state, removing the one element who wanted to remove by using the index of the person and updating the state.
    The flaw of that approach is that javascript objects and arrays are reference types. So when I get persons from our state as we did in the last lesson, we act a pointer to the original personโ€™s object managed by React.
    Then if we splice the already mutate the original data and while it does work without throwing an error, this is not really how you should do it. this can lead to unpredictable apps and is a bad approach.


    Updating State Immutably

    A good practice is to create a copy of your persistence array before manipulating it.

    And

    A simple way of doing this is by calling the slice() method. slice without arguments simply copies the full array and returns a new one which is then stored to its assigne.
    example: in App.js

    src/App.js
    
    ...
    deletePersonHandler = personIndex => {
    	const persons = this.state.persons.slice(); // Creates a new copy of array
    	persons.splice(personIndex, 1);
    	this.setState({ persons: persons });
    };
    ...
    

    And then you can safely edit the new array and then update do react state with your new array.

    Alternative Approach

    An Alternative to this approach would be to use a ES6 feature i.e. the spread operator you can simply set persons equals to new arrays
    example: in App.js

    src/App.js
    
    ...
    deletePersonHandler = personIndex => {
    	//  const persons = this.state.persons.slice();
      const persons = [...this.state.persons];    // Creates a new copy of array
    	persons.splice(personIndex, 1);
    	this.setState({ persons: persons });
    };
    ...
    

    new array can now use spread operator which are three dots ... , might looks strange but it is a javascript operator.
    what it does is, it spread out the elements of array into a list of elements which simply then gets added to the const persons array.
    So now we have an array a new array with the objects from the old array but not the old array itself. so that is equivalent to the slice approach use whichever one you prefer. but the spread operator (...) is a more modern one and you will see this spread operator more throughout this course.
    With this we get the same behavior as before and, we didnโ€™t fix the error message with that.

    Conslusion

    you should always update state in an immutable fashion so without mutating the original state first, reate a copy change that and then update the state with setState().

    React introduction
    React Component
    Updating State Immutably In React

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept