Improve documentation for useSyncExternalStore #6530
Conversation
Size changesDetails📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
110.55 KB (🟡 +4 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Five Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/404 |
128.05 KB (🟡 +2 B) |
238.6 KB |
/500 |
128.06 KB (🟡 +2 B) |
238.61 KB |
/[[...markdownPath]] |
130.5 KB (🟡 +2 B) |
241.05 KB |
/errors |
128.31 KB (🟡 +2 B) |
238.86 KB |
/errors/[errorCode] |
128.28 KB (🟡 +2 B) |
238.83 KB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
rickhanlonii
left a comment
rickhanlonii
left a comment
There was a problem hiding this comment.
Hey @pwbriggs, thanks for the suggestion and your help elsewhere on the docs! I left some comments for improving this even more, let me know what you think!
| }; | ||
|
|
||
| console.log(object1 == object2); // false | ||
| ``` |
There was a problem hiding this comment.
Something is missing here that connects it back to why return {} is a new object every time, something like this:
This also applies to the return values of functions:
function getUser() {
return {
name: "John",
favoriteNumber: 42
};
}
const object1 = getUser();
const object2 = getUser();
console.log(object1 == object2); // falseAnd maybe add an example of hosting the object out to show how it doesn't change?
There was a problem hiding this comment.
The examples would be better as chat settings like in the explanations above rather than users.
There was a problem hiding this comment.
@rickhanlonii I'm not sure how I should change the code example. I want it to be clear to the reader that this isn't specific to getSnapshot handlers (we include examples of that above), but it needs to include returning an object from a function (like you said).
We also want to make it clear that the values of the retuned object are the same, but then it doesn't make sense why you would be comparing the returned values.
The best I can think of is something like this:
function getMathConstants() {
return {
pi: 3.14159,
e: 2.71828
}
}
let mathConstants1 = getMathConstants();
let mathConstants2 = getMathConstants();
console.log(mathConstants1 == mathConstants2);
// falseBut that makes very little sense. And, like you said, it should probably be related to the example chat app.
Any suggestions?
Update everything but the code example.
|
Hey @pwbriggs, unrelated to this PR, I can't find a way to contact you. Can you email me or DM me on twitter? I appreciate all you do on the docs and I'd like to upgrade your permissions to be a maintainer if you're interested :) |
|
Sure, thanks for the invitation! Do you have an email address you're willing to share? Do you have access to |
|
Same as my GH handle at gmail |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
3 participants
Clarify the "I’m getting an error: “The result of getSnapshot should be cached” section of the
useSyncExternalStoreAPI reference documentation.I put some notes about why the documented error occurs in a
<DeepDive>section. It focuses on the details of comparison in JavaScript. I'm not sure if this is the intended use of deep dive sections (for example, how much prior knowledge about JavaScript do we assume the reader has? Who is the intended audience for the deep dive sections in the API reference? How well-known are the details of comparing objects in JavaScript?), but, in any case, I think this is at least an improvement.