Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <p>State immutability is very important when it comes to working with React. It's easy to follow when working with primitive data types, but an untrained user may have difficulty with composite ones, such as objects and arrays.</p>

2 <p>This lesson discusses the ways to update objects and arrays partially. In addition to examples in pure JavaScript, we'll also show how to use the immutability-helper library to facilitate such operations. It helps to work with upgrades where the JavaScript code is too complex.</p>

3 <h2>Arrays</h2>

4 <h3>Adding elements to an array</h3>

5 <p>The simplest method is adding to an array:</p>

6 <p>If you want to add an element to the beginning, all you have to do is swap the elements of the array:</p>

7 <h4>Using immutability-helper</h4>

8 <h3>Deleting from an array</h3>

9 <p>It is a more curious example. If you want to remove an element from an array, you should know what to remove. It means that each item in the collection must have an identifier. We can use good old-fashioned filtering to delete something:</p>

10 <p>You may be wondering where the identifier inside the handler came from. And this is where closure comes to our aid:</p>

11 <p>See the Pen<a>js_react_immutability_array_remove_element</a>by Hexlet (<a>@hexlet</a>) on<a>CodePen</a>.</p>

12 <p>Note the way the handler is set: removeItem = (id) => (e) => { and its use of onClick={this.removeItem(id)}.</p>

13 <h4>Using immutability-helper</h4>

14 <p>In clean JavaScript, deleting using a filter is the best way. Using immutability-helper is too complicated.</p>

15 <h3>Changing an array</h3>

16 <p>Unfortunately, if we do not have any additional tools, the code for our solution will get too cumbersome. We're showing it here for reference, but you shouldn't do this in real projects:</p>

17 <p>We imagine we won't have to convince you that this is too much :)</p>

18 <h4>Using immutability-helper</h4>

19 <p>As you can see, this method is much easier and cleaner, so we recommend to use it.</p>

20 <h2>Objects</h2>

21 <h3>Adding to an object</h3>

22 <p>It is just as simple as with arrays:</p>

23 <p>Or you can do this, if the key is calculated dynamically:</p>

24 <h3>Removing from an object</h3>

25 <p>Here destructuring comes to the rescue:</p>

26 <h4>Using immutability-helper</h4>

27 <h3>Changing an object</h3>

28 <p>It is the same as adding:</p>

29 <h4>Using immutability-helper</h4>

30 <h2>Deep nesting</h2>

31 <p>In the examples above, you can mostly make do with the standard JavaScript tools' it's only more convenient to use third-party solutions in certain situations. It is the same in real projects, especially if you consider React's recommendations and keep the state as flat as possible.</p>

32 <p>In some situations, the data that needs to be changed isn't on the surface but deep within the structures. Unfortunately, regular JavaScript code will be huge in these situations, so you can't do without additional libraries.</p>

33 <h2>Equivalent options</h2>

34 <p>The library immutability-helper isn't the only one for such tasks. Here are a few more popular tools:</p>

35 <ul><li><a>immutable-js</a>, based on persistent data</li>

36 <li><a>updeep</a>, making extensive use of mapping</li>

37 <li><a>immerjs</a>, which is probably the most popular library in JavaScript for working with immutable data</li>

38 </ul>