You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/optimizing-performance.md
+1-33Lines changed: 1 addition & 33 deletions
Original file line number
Diff line number
Diff line change
@@ -381,36 +381,4 @@ function updateColorMap(colormap) {
381
381
382
382
If you're using Create React App, both `Object.assign` and the object spread syntax are available by default.
383
383
384
-
## Using Immutable Data Structures {#using-immutable-data-structures}
385
-
386
-
[Immutable.js](https://github.com/facebook/immutable-js) is another way to solve this problem. It provides immutable, persistent collections that work via structural sharing:
387
-
388
-
**Immutable*: once created, a collection cannot be altered at another point in time.
389
-
**Persistent*: new collections can be created from a previous collection and a mutation such as set. The original collection is still valid after the new collection is created.
390
-
**Structural Sharing*: new collections are created using as much of the same structure as the original collection as possible, reducing copying to a minimum to improve performance.
391
-
392
-
Immutability makes tracking changes cheap. A change will always result in a new object so we only need to check if the reference to the object has changed. For example, in this regular JavaScript code:
393
-
394
-
```javascript
395
-
constx= { foo:'bar' };
396
-
consty= x;
397
-
y.foo='baz';
398
-
x === y; // true
399
-
```
400
-
401
-
Although `y` was edited, since it's a reference to the same object as `x`, this comparison returns `true`. You can write similar code with immutable.js:
402
-
403
-
```javascript
404
-
constSomeRecord=Immutable.Record({ foo:null });
405
-
constx=newSomeRecord({ foo:'bar' });
406
-
consty=x.set('foo', 'baz');
407
-
constz=x.set('foo', 'bar');
408
-
x === y; // false
409
-
x === z; // true
410
-
```
411
-
412
-
In this case, since a new reference is returned when mutating `x`, we can use a reference equality check `(x === y)` to verify that the new value stored in `y` is different than the original value stored in `x`.
413
-
414
-
Other libraries that can help use immutable data include [Immer](https://github.com/mweststrate/immer), [immutability-helper](https://github.com/kolodny/immutability-helper), and [seamless-immutable](https://github.com/rtfeldman/seamless-immutable).
415
-
416
-
Immutable data structures provide you with a cheap way to track changes on objects, which is all we need to implement `shouldComponentUpdate`. This can often provide you with a nice performance boost.
384
+
When you deal with deeply nested objects, updating them in an immutable way can feel convoluted. If you run into this problem, check out [Immer](https://github.com/mweststrate/immer) or [immutability-helper](https://github.com/kolodny/immutability-helper). These libraries let you write highly readable code without losing the benefits of immutability.
0 commit comments