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

Add ReactDOM.hydrate() as explicit SSR hydration API #10339

Merged
merged 4 commits into from Aug 1, 2017

Conversation

Projects
None yet
3 participants
@gaearon
Copy link
Member

gaearon commented Aug 1, 2017

First attempt at #10189.

  • Removes data-reactid from new SSR.
  • We now use presence of data-reactroot as heuristic for hydration.
  • There is also an explicit ReactDOM.hydrate() API that never clears the existing content.
  • ReactDOM.render() will now print a deprecation message when it tries to reuse markup.
  • Downgrade deprecation message to lowPriorityWarning.
  • A warning if we tried to hydrate but there’s no DOM to hydrate into.

This means ReactDOM.render() would still attempt to hydrate when there’s an element root, but might not work for new features (like top level strings or fragments). ReactDOM.hydrate() would always hydrate.

I have switched the integration test to use the new hydration API when available, and this let me remove the special case for top level text nodes that I added in #10333.

@gaearon gaearon requested a review from sebmarkbage Aug 1, 2017

@gaearon gaearon force-pushed the gaearon:explicit-hydrate-api branch from 286f6a4 to 965217d Aug 1, 2017

@gaearon

This comment has been minimized.

Copy link
Member Author

gaearon commented Aug 1, 2017

Updated to add deprecation messages and expanded tests for both APIs while we support them.

@gaearon gaearon force-pushed the gaearon:explicit-hydrate-api branch 2 times, most recently from 6ac1772 to 4096c75 Aug 1, 2017

{'Hello ' + this.props.hello}
</body>
</html>
describe('with old implicit hydration API', () => {

This comment has been minimized.

@gaearon

gaearon Aug 1, 2017

Author Member

I copy pasted these tests into two separate groups.

One still calls render() and, for cases where markup is reused, we verify that in Fiber mode we print a deprecation. We can delete this group of tests in 17.

Another calls hydrate() and we don’t expect deprecations there. The new version also removes non-Fiber branches since hydrate() only exists in Fiber.

@@ -305,7 +305,6 @@ function createOpenTagMarkup(
if (isRootElement) {
ret += ' ' + DOMMarkupOperations.createMarkupForRoot();
}
ret += ' ' + DOMMarkupOperations.createMarkupForID('');

This comment has been minimized.

@sebmarkbage

sebmarkbage Aug 1, 2017

Member

If we remove this then we break existing usage of ReactDOM.render and have no way of showing the warning, no?

This comment has been minimized.

@gaearon

gaearon Aug 1, 2017

Author Member

Isn't the data-reactroot attribute enough for detection?

This comment has been minimized.

@sebmarkbage

sebmarkbage Aug 1, 2017

Member

I think this changes the behavior if you try to ReactDOM.render into a non-container. But maybe that's fine?

This comment has been minimized.

@gaearon

gaearon Aug 1, 2017

Author Member

What is a non-container?

This comment has been minimized.

@sebmarkbage

sebmarkbage Aug 1, 2017

Member

A child of the container. The React root is the first child of the container. It also has children. You're not supported to render into those.

@bvaughn bvaughn referenced this pull request Aug 1, 2017

Closed

React 16 RC #10294

@gaearon gaearon referenced this pull request Aug 1, 2017

Closed

React 16 Umbrella ☂️ (and 15.5) #8854

117 of 120 tasks complete
@sebmarkbage
Copy link
Member

sebmarkbage left a comment

I'm too hungry to think about what happens with non-containers. It's probably fine because you'd have a warning in 15.

@gaearon gaearon force-pushed the gaearon:explicit-hydrate-api branch from 4fc2346 to 3c0a6cf Aug 1, 2017

@gaearon gaearon merged commit f8062df into facebook:master Aug 1, 2017

1 check passed

ci/circleci Your tests passed on CircleCI!
Details
warning(
false,
'hydrate(): Expected to hydrate from server-rendered markup, but the passed ' +
'DOM container node was empty. React will create the DOM from scratch.',

This comment has been minimized.

@sebmarkbage

sebmarkbage Aug 1, 2017

Member

IMO we should revert this warning since it's valid to have an empty container if your server rendered "", null, false or [] at the root. You'll get a warning about hydration being a non-match later anyway, if it's not. We can potentially special case the bulk error message in #10085 if the only diff was that the container was empty.

This comment has been minimized.

@gaearon

gaearon Aug 1, 2017

Author Member

Ah okay. Will do.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.