[18] Updated Suspense doc with behavior during SSR and Hydration #4484
Conversation
Size Changes📦 Next.js Bundle AnalysisThis analysis was generated by the next.js bundle analysis action 🤖 Two Pages Changed SizeThe following pages changed size from the code in this PR compared to its base branch:
DetailsOnly 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 Any third party scripts you have added directly to your app using the 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. |
content/docs/reference-react.md
Outdated
| #### `React.Suspense` during hydration | ||
| Suspense boundaries depend on their parent boundaries being hydrated before they can hydrate, but they can hydrate independently from sibling boundaries. Events on a boundary before its hydrated will cause the boundary to hydrate at | ||
| a higher priority than neighboring boundaries but discrete events (eg. click) will not be replayed upon hydration. Only | ||
| the last continuous event (`focusin`, `mousein`, `dragenter`, `mouseover`, `pointerover`, `gotpointercapture`, `hover`) |
There was a problem hiding this comment.
I believe you meant mouseenter not mousein?
Is focusin a continious event?
I think it was brought up earlier whether discrete vs continous events needs a separate section. If this is something devs should be aware of, then it's probably better to link to a list of discrete and continous events.
Because intuitively a gotpointercapture is a discrete thing because a pointer being captured is a discrete state from my understanding (pointer is captured or not). Same for dragenter I guess. For mouseover it makes sense to consider it continous.
Either way, I think this illustrates that it isn't clear what events are considered "discrete" and which are "continious".
There was a problem hiding this comment.
This is why I don't like "discrete" as a word. Our usage of "discrete" is "user meant to do this, and there could be a mistake if we batch it with another same event". Our usage of "continuous" is "user did not intentionally mean to do this particular event, and so we can skip/batch it up with next event of the same type". At least to my understanding.
There was a problem hiding this comment.
It doesn't really have anything to do with the user intent. That's just something we use as an explanation.
Btw, I don't think we should use the term replay. Because actually, we probably shouldn't actually replay the same event. It's more about reissuing an observation of the current state.
This is like if something is animating below your cursor. Even if you don't move the mouse it should ideally trigger mouseenter/leave anyway as the thing below moves in and out to trigger hover effects. CSS hovers do this.
Focus is a little special since when it's accompanied by other events like key events, it effectively becomes discrete as a result of how it's controlled.
There was a problem hiding this comment.
For purposes of the hydration, these are not the same thing as the "discrete" and "continuous" hints that we use to inform priorities and batching.
I think we shouldn't couple them and probably not use the same terminology.
These events are things where you can issue new events to inform what the state of the world is. If the user twitched a little, it's the same enter/leave happening on a moving target. The goal in the end is to inform what the current state of the world is.
focusin is like saying "activeElement is now on this". So restating that "activeElement is now on this" is fine.
Similarly, gotpointercapture is like restating that you currently has the pointer captured.
There was a problem hiding this comment.
There's no hover event is there?
There was a problem hiding this comment.
We emulate it off mousein
There was a problem hiding this comment.
"persistent events" makes sense to me now. Thanks for clarifying!
There was a problem hiding this comment.
@salazarm Is that an FB-only thing?
There was a problem hiding this comment.
@sebmarkbage oops it was a mistake. I updated the events
salazarm
force-pushed
the
ms-18-suspense-ssr-hydration
branch
from
78b9eac
to
0886cdf
Compare
Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>
* update wording * wording * update events * Update content/docs/reference-react.md Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com> * add link to selective hydration * remove some of the implementation details Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>
* [18] ReactDOM reference to createRoot/hydrateRoot (#4340) * [18] ReactDOM reference to createRoot/hydrateRoot * Update note about render and hydrate * Match the warning text * s/Render/render * [18] Update ReactDOMClient docs (#4468) * [18] Update ReactDOMClient docs * Remove ReactDOMClient where it's obvious * Update browser message * Update browser message note * Update based on feedback * Add react-dom/client docs * [18] Upgrade homepage examples (#4469) * [18] Switch code samples to createRoot (#4470) * [18] Switch code samples to createRoot * Feedback fixes * Feedback updates * [18] Use hydrateRoot and root.unmount. (#4473) * [18] Add docs for flushSync (#4474) * [18] Add flushSync to ReactDOM docs * Seb feedback * More Seb feedback * [18] Bump version to 18 (#4478) * [18] Update browser requirements (#4476) * [18] Update browser requirements * Update based on feedback * [18] Add stubs for new API references (#4477) * [18] Add stubs for new API references * Change order/grouping * [18] Redirect outdated Concurrent Mode docs (#4481) * [18] Redirect outdated Concurrent Mode docs * Use Vercel redirects instead * [18] Update versions page (#4482) * [18] Update version page * Fix prettier * [18] Update React.lazy docs (#4483) * [18] Add docs for useSyncExternalStore (#4487) * [18] Add docs for useSyncExternalStore * rm "optional" * [18] Add docs for useInsertionEffect (#4486) * [18] Add docs for useId (#4488) * [18] Add docs for useId * Update based on feedback * Add Strict Effects to Strict Mode (#4362) * Add Strict Effects to Strict Mode * Update with new thinking * [18] Update docs for useEffect timing (#4498) * [18] Add docs for useDeferredValue (#4497) * [18] Update suspense docs for unexpected fallbacks (#4500) * [18] Update suspense docs for unexpected fallbacks * Add inline code block * Feedback fixes * [18] Updated Suspense doc with behavior during SSR and Hydration (#4484) * update wording * wording * update events * Update content/docs/reference-react.md Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com> * add link to selective hydration * remove some of the implementation details Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com> * [18] renderToPipeableStream doc (#4485) * new streaming ssr api * add readable stream * code snippets * Rename strict effects / unsafe effects to use the reusable state terminology (#4505) * Add draft of 18 release post * Add links to speaker Twitter profiles * [18] Update upgrade guide * Fix typo in blog title * [18] Blog - add note for react native * [18] Add changelog info to blog posts * Edit Suspense for data fetching section * Update date * [18] Add links * Consistent title case * Update link to merged RFC * [18] Update APIs and links * [18] Add start/useTransition docs (#4479) * [18] Add start/useTransition docs * Updates based on feedback * [18] Generate heading IDs * Add note about Strict Mode * Just frameworks * Reorder, fix content * Typos * Clarify Suspense frameworks section * Revert lost changes that happened when I undo-ed in my editor Co-authored-by: salazarm <salazarm@users.noreply.github.com> Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com> Co-authored-by: Sebastian Markbåge <sebastian@calyptus.eu> Co-authored-by: Andrew Clark <git@andrewclark.io> Co-authored-by: dan <dan.abramov@gmail.com>
Not sure if this is the right amount of detail