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: src/content/reference/react/useSyncExternalStore.md
+6-5Lines changed: 6 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -379,14 +379,15 @@ This error means your `getSnapshot` function returns a new object every time it'
379
379
380
380
```js {3-5}
381
381
functiongetSnapshot() {
382
-
// 🔴 This creates a new object every time getSnapshot is called, even when myStore.todos has not changed
382
+
// 🔴 This creates a new object every time getSnapshot is
383
+
// called, even when myStore.todos has not changed
383
384
return {
384
385
todos:myStore.todos
385
386
};
386
387
}
387
388
```
388
389
389
-
React will re-render the component if `getSnapshot` returns a different object than the last time it was called. Therefore, if you create a new object, React will enter an infinite loop and raise this error.
390
+
React will re-render the component if `getSnapshot` returns a different object than the last time it was called. Therefore, if you return a new object on every call, React will enter an infinite loop and raise this error.
390
391
391
392
Your `getSnapshot` object should only return a different object if the data in the external store has actually changed. If your store contains immutable data, you can return that data directly:
392
393
@@ -397,15 +398,15 @@ function getSnapshot() {
397
398
}
398
399
```
399
400
400
-
If the data in your store is mutable, your `getSnapshot` function should return an immutable snapshot of it. This means it *does* need to create new objects, but it shouldn't do this for every single call. Instead, it should cache the last calculated snapshot, and return a new object only if the data in the store has changed. If it has not changed, you should return the cached object. How you determine whether the data in your store has changed is specific to the store you're using.
401
+
If the data in your store is mutable, your `getSnapshot` function should return an immutable snapshot of it. This means it *does* need to create new objects, but not for every single call. Instead, it should cache the last calculated snapshot, and return a new object only if the data in the store has changed. How you determine whether the data in your store has changed is specific to the store you're using.
401
402
402
403
<DeepDive>
403
404
404
-
#### Why does React re-render even if the values of your object have not changed? {/*a*/}
405
+
#### Why does React re-render even if the values of your object have not changed? {/*why-does-react-re-render-even-if-the-values-of-your-object-have-not-changed*/}
405
406
406
407
JavaScript has a syntax called [object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), which are key-value pairs enclosed in curly braces (`{}`). This syntax creates a new object.
407
408
408
-
However, when comparing objects, JavaScript only checks if the two objects are the same object, not if their *contents* are equal. Because the object literal syntax creates a new object, comparing two objects created with the object literal syntax always gives `false`, even when the values are the same. For example:
409
+
When comparing objects, JavaScript only checks if the two objects are the same object, not if their *contents* are equal. Since the object literal syntax creates a new object, comparing two objects created with the object literal syntax always gives `false`, even when the values are the same. For example:
0 commit comments