-
Notifications
You must be signed in to change notification settings - Fork 47.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ignore SSR warning using explicit suppressHydrationWarning option #11126
Conversation
This lets you ignore the warning on a single element and its direct child content. This is useful for simple fields that you're expecting to fail such as time stamps. Note that this still won't patch up such content so it'll remain inconsistent. It's also not suitable for nested complex content that may change.
For this to work, we need to split the API into a container and normal version. Since the root doesn't have a type nor props.
Also fixing the render->hydrate API change in the fixture
The purpose of these hooks is to pass the parent context to them. I don't want to do that in the normal hydrateTextInstance hooks since this is only used in DEV. This is also in line with what happens if there is no text instance at all and we invoke didNotFindHydratableTextInstance.
This lets us ignore this call when we have parent props available and the suppression flag is set.
Deploy preview ready! Built with commit b3dfd2d |
didNotHydrateInstance && | ||
// didNotFindHydratableContainerInstance && | ||
// didNotFindHydratableContainerTextInstance && |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can delete?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh never mind, I see the commented out code below
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM. Host config is getting pretty bloated. I like the idea of splitting it into separate objects (e.g. moving all hydration-related methods into their own, optional config).
This lets you ignore the warning on a single element and its direct child content. This is useful for simple fields that you're expecting to fail such as time stamps.
Note that this still won't patch up such content so it'll remain inconsistent until an update is flushed. It's also not suitable for nested complex content that may change. That's why it's only shallow.
The feature is nice but the architectural mess that is the hydration warning makes this harder than it should be. See individual commits for details.
There's also a lot of logic in the renderer code as opposed to just being built-in in the Fiber code. I can imagine us doing a follow up where we move more of the hydration warning logic into shared code. We could feed "reads" from the renderer code that provides canonicalized values that then can be used for comparisons inside the shared code which is then used to build up a nice isomorphic error message that can be used across renderers. That part is related to #10085