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

Expand on recommended hydrate() usage #200

Merged
merged 4 commits into from
Oct 23, 2017
Merged

Expand on recommended hydrate() usage #200

merged 4 commits into from
Oct 23, 2017

Conversation

gaearon
Copy link
Member

@gaearon gaearon commented Oct 23, 2017

Partly addresses #25.
See yet another thread: facebook/react#11336.

@reactjs-bot
Copy link

reactjs-bot commented Oct 23, 2017

Deploy preview ready!

Built with commit fb2f81b

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

Copy link
Contributor

@bvaughn bvaughn left a comment

Choose a reason for hiding this comment

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

This is a really nice change 👍

Same as [`render()`](#render), but is used to hydrate a container whose HTML contents were rendered by [`ReactDOMServer`](/docs/react-dom-server.html). React will attach event listeners while preserving as much of the existing DOM as possible. For best results, you should try to render the same content on the server as on the client, with as few differences as possible.
Same as [`render()`](#render), but is used to hydrate a container whose HTML contents were rendered by [`ReactDOMServer`](/docs/react-dom-server.html). React will attempt to attach event listeners to the existing markup.

React expects that the rendered content is identical between the server and the client. It can patch up differences in text content (such as timestamps), but you should treat mismatches as bugs and fix them. React reports any mismatches as warnings during hydration in development. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggestion:

Maybe change:

React reports any mismatches as warnings during hydration in development.

To:

In development mode, React warns about mismatches during hydration.

@gaearon
Copy link
Member Author

gaearon commented Oct 23, 2017

Tweaked a bit, mind looking again?

@bvaughn
Copy link
Contributor

bvaughn commented Oct 23, 2017

Why not? They pay me to do this. 😁

@bvaughn
Copy link
Contributor

bvaughn commented Oct 23, 2017

I think the new paragraph is nice too. 👍

@gaearon gaearon merged commit bea8fa0 into master Oct 23, 2017
@gaearon gaearon deleted the gaearon-patch-4 branch October 23, 2017 15:55
jhonmike pushed a commit to jhonmike/reactjs.org that referenced this pull request Jul 1, 2020
* translate of react blog post react v15.6.2

* Update content/blog/2017-09-25-react-v15.6.2.md

Co-Authored-By: netochaves <netobac1@gmail.com>
BetterZxx pushed a commit to BetterZxx/react.dev that referenced this pull request Mar 21, 2023
docs(cn): fix link in content/docs/reference-react-component.md
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.

None yet

4 participants