Skip to content
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

Merged
merged 6 commits into from
Oct 7, 2017

Conversation

sebmarkbage
Copy link
Collaborator

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

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.
@reactjs-bot
Copy link

Deploy preview ready!

Built with commit b3dfd2d

https://deploy-preview-11126--reactjs.netlify.com

didNotHydrateInstance &&
// didNotFindHydratableContainerInstance &&
// didNotFindHydratableContainerTextInstance &&
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can delete?

Copy link
Collaborator

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

Copy link
Collaborator

@acdlite acdlite left a 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).

@sebmarkbage sebmarkbage merged commit 4131af3 into facebook:master Oct 7, 2017
@gaearon gaearon mentioned this pull request Oct 10, 2017
19 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants