Doc updates for React 16 + blog post #10824

acdlite · 2017-09-25T23:33:56Z

Shhhhh nothing to see here.

nhunzaker · 2017-09-25T23:38:20Z

docs/_posts/2017-09-26-react-v16.0.md

+
+Although React 16 includes significant internal changes, in terms of upgrading, you can think of this like any other major React release. We've been serving React 16 to Facebook and Messenger.com users since earlier this year, and we released several beta and release candidate versions to flush out additional issues. With minor exceptions, **if your app runs in 15.6 without any warnings, it should work in 16.**
+
+Deprecations


Should this be a heading?

reactjs-bot · 2017-09-25T23:39:15Z

Deploy preview ready!

Built with commit 5778629

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

nhunzaker

Sorry, you said 🙈! Super exciting though.

flarnie · 2017-09-25T23:40:09Z

docs/_posts/2017-09-26-react-v16.0.md

+
+### Better error handling
+
+


nit - extra newline

flarnie · 2017-09-25T23:44:32Z

docs/_posts/2017-09-26-react-v16.0.md

+
+### New core architecture
+
+React 16 is the first version of React built on top of a new core architecture, codenamed "Fiber." You can read all about this project over on Facebook's engineering blog (TODO: link). (Spoiler: we rewrote React!)


Just a reminder to fill in the 'TODO' links. :)

flarnie · 2017-09-25T23:45:59Z

docs/_posts/2017-09-26-react-v16.0.md

+
+Documentation (TODO: link)
+
+Breaking changes


Same as what @nhunzaker mentioned above - this should probably be a heading.

flarnie · 2017-09-25T23:46:48Z

docs/_posts/2017-09-26-react-v16.0.md

+Breaking changes
+
+* React 15 had limited, undocumented support for error boundaries using `unstable_handleError`. This method has been renamed to `componentDidCatch`. You can use a codemod to automatically migrate to the new API (https://github.com/reactjs/react-codemod#error-boundaries).
+* ReactDOM.render and ReactDOM.unstable_renderIntoContainer now return null if called from inside a lifecycle method. To work around this, you can use portals (https://github.com/facebook/react/issues/10309#issuecomment-318433235) or refs (https://github.com/facebook/react/issues/10309#issuecomment-318434635).


We probably want to turn these into nice markdown links.

flarnie · 2017-09-25T23:47:39Z

docs/_posts/2017-09-26-react-v16.0.md

+* When replacing `<A />` with `<B />`,  `B.componentWillMount` now always happens before  `A.componentWillUnmount`. Previously, `A.componentWillUnmount` could fire first in some cases.
+* Previously, changing the ref to a component would always detach the ref before that component's render is called. Now, we change the ref later, when applying the changes to the DOM.
+* It is not safe to re-render into a container that was modified by something other than React. This worked previously in some cases but was never supported. We now emit a warning in this case. Instead you should clean up your component trees using `ReactDOM.unmountComponentAtNode`. [See this example.](https://github.com/facebook/react/issues/10294#issuecomment-318820987)
+* `componentDidUpdate` lifecycle no longer receives `prevContext` param. (See #8631)


Same here - should turn this in to a markdown link.

flarnie · 2017-09-25T23:47:56Z

docs/_posts/2017-09-26-react-v16.0.md

+* Shallow renderer no longer calls `componentDidUpdate()` because DOM refs are not available. This also makes it consistent with `componentDidMount()` (which does not get called in previous versions either).
+* Shallow renderer does not implement `unstable_batchedUpdates()` anymore.
+
+Packaging


flarnie · 2017-09-26T00:01:13Z

docs/docs/portals.md

+
+A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container.
+
+[Try out an example on CodePen.](https://codepen.io/acdlite/pen/JrKgmz)


Read the codepen - lgtm.

flarnie · 2017-09-26T00:05:50Z

I really enjoyed reading this!

Also - I think we could open a PR against the 15-stable branch to be on the safe side.

koba04 · 2017-09-26T00:24:52Z

docs/docs/portals.md

+```js
+// These two containers are siblings in the DOM
+const appContainer = document.getElementById('app-container');
+const modalContainer = document.getElementById('app-container');


document.getElementById('modal-container'); ?

gaearon · 2017-09-26T00:27:17Z

Is it normal that when I press Blog at the top I get

loader.js:251 A page wasn't found for "/blog"

?

clemmy · 2017-09-26T00:39:05Z

docs/_posts/2017-09-26-react-v16.0.md

+
+That amounts to a combined **32% size decrease compared to the previous version (30% post-gzip)**.
+
+The size difference is partly attributable to a change in packaging. React now uses [Rollup](https://rollupjs.org/) to create flat bundles for each of its different target formats, resulting in both size and runtime performance wins. The 


Trailing The

gaearon · 2017-09-26T00:29:00Z

docs/_posts/2017-09-26-react-v16.0.md

+}
+```
+
+Support for returning strings from the render method has also been added.


Nit: it's usually better to avoid passive when possible, and use verbs over nouns.

e.g. this reads easier:

We've added support for returning strings from the render method too.

or

You can return strings now as well!

Good call, I think I was trying to avoid too many “we”s and fell off track. Hard to find the right voice!

gaearon · 2017-09-26T00:29:47Z

docs/_posts/2017-09-26-react-v16.0.md

+```
+
+Support for returning strings from the render method has also been added.
+


Should we mention we are considering adding a syntax that wouldn't require keys in the future? I suspect it will be the most common question.

Does this also mean that it is always safe to return this.props.children in render for the components that do it, without wrapping it with React.Children.only?

gaearon · 2017-09-26T00:30:32Z

docs/_posts/2017-09-26-react-v16.0.md

+render() {
+  // React does *not* create a new div. It renders the children into `divNode`.
+  // `divNode` is any valid DOM node, regardless of its location in the DOM.
+  return React.createPortal(


It's on ReactDOM. (Although we might provide an isomorphic version someday.)

came here to comment this 😅

gaearon · 2017-09-26T00:30:58Z

docs/_posts/2017-09-26-react-v16.0.md

+  // `divNode` is any valid DOM node, regardless of its location in the DOM.
+  return React.createPortal(
+    this.props.children,
+    divNode,


divNode is a bit odd, maybe domNode?

Does this work with any Node (e.g. can an svg element be a parent), or only with HTMLElement? If the latter, naming it htmlElement might be clearer

gaearon · 2017-09-26T00:31:44Z

docs/_posts/2017-09-26-react-v16.0.md

+
+React 16 is better at hydrating server-rendered HTML. It no longer requires the initial render to exactly match the result from the server. Instead, it will attempt to reuse as much of the existing DOM as possible. No more checksums!
+
+The server renderer has also been completely rewritten to support streaming. React core team member Sasha Aicken, who worked on this feature, wrote a [great article describing React 16's SSR improvements](https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67). "Rendering to a stream can reduce the time to first byte (TTFB) for your content, sending the beginning of the document down the wire to the browser before the next part of the document has even been generated. All major browsers will start parsing and rendering the document earlier when the content is streamed from the server this way."


Aickin (name in text has a typo in it)

gaearon · 2017-09-26T00:33:49Z

docs/_posts/2017-09-26-react-v16.0.md

+
+That amounts to a combined **32% size decrease compared to the previous version (30% post-gzip)**.
+
+The size difference is partly attributable to a change in packaging. React now uses [Rollup](https://rollupjs.org/) to create flat bundles for each of its different target formats, resulting in both size and runtime performance wins. The 


Hanging "The" at the end

gaearon · 2017-09-26T00:39:52Z

docs/_posts/2017-09-26-react-v16.0.md

+
+### Deprecations
+
+Hydrating a server-rendered container now has an explicit API. Use ReactDOM.hydrate instead of ReactDOM.render if you're reviving server-rendered HTML. Keep using ReactDOM.render if you're just doing client-side rendering.


Needs backticks for methods

gaearon · 2017-09-26T00:40:22Z

docs/_posts/2017-09-26-react-v16.0.md

+
+Although React 16 includes significant internal changes, in terms of upgrading, you can think of this like any other major React release. We've been serving React 16 to Facebook and Messenger.com users since earlier this year, and we released several beta and release candidate versions to flush out additional issues. With minor exceptions, **if your app runs in 15.6 without any warnings, it should work in 16.**
+
+### Deprecations


Maybe worth saying "New Deprecations" to make it clear these aren't deprecations we removed

gaearon · 2017-09-26T00:40:38Z

docs/_posts/2017-09-26-react-v16.0.md

+### Breaking changes
+
+* React 15 had limited, undocumented support for error boundaries using `unstable_handleError`. This method has been renamed to `componentDidCatch`. You can use a codemod to [automatically migrate to the new API](https://github.com/reactjs/react-codemod#error-boundaries).
+* `ReactDOM.render` and `ReactDOM.unstable_renderIntoContainer` now return null if called from inside a lifecycle method. To work around this, you can use [portals](https://github.com/facebook/react/issues/10309#issuecomment-318433235) or [refs[(https://github.com/facebook/react/issues/10309#issuecomment-318434635).


refs link is broken Markdown

gaearon · 2017-09-26T00:42:53Z

docs/_posts/2017-09-26-react-v16.0.md

+## Upgrading
+
+Although React 16 includes significant internal changes, in terms of upgrading, you can think of this like any other major React release. We've been serving React 16 to Facebook and Messenger.com users since earlier this year, and we released several beta and release candidate versions to flush out additional issues. With minor exceptions, **if your app runs in 15.6 without any warnings, it should work in 16.**
+


Should we mention somewhere that we expect all addons except Perf to work in the foreseeable future, but won't publish more updates to them? And that we'll consider bringing Perf back at some point in the future, but for now we recommend using the browser timeline as documented?

sophiebits

nice

sophiebits · 2017-09-26T01:27:58Z

docs/_posts/2017-09-26-react-v16.0.md

+### Better error handling
+
+
+Previously, runtime errors during rendering could potentially put React in a broken state, producing cryptic error messages and requiring a page refresh to recover. To address this problem, React 16 uses a more resilient error-handling strategy. By default, if an error is thrown inside a component's render or lifecycle methods, the whole component tree is unmounted from the root. This prevents the display of corrupted data. However, it's probably not the ideal user experience.


I think "could potentially" is redundant – just "could put"?

sophiebits · 2017-09-26T01:28:55Z

docs/_posts/2017-09-26-react-v16.0.md

+
+### Better server-side rendering
+
+React 16 is better at hydrating server-rendered HTML. It no longer requires the initial render to exactly match the result from the server. Instead, it will attempt to reuse as much of the existing DOM as possible. No more checksums!


Can we clarify that we don't recommend intentional mismatches?

One of the breaking changes for client-only rendering I noticed in React 16 is that it does not empty the root element before rendering.

Luckily I noticed it early enough at work, before other people tried to write HTML inside mount points (loading spinners et al) that were intended to be deleted when React rendered.

Hmm. I don't remember if this was intentional or not. Maybe worth filing a bug to discuss?
My impression is that render() still clears the root element.

I'll check again at work tomorrow, but it could be caused by my particular use of portals.

I'm using many portals to render different components at different mount points in a legacy website (not SPA) while sharing a common context; it's possible that I had noticed this detail in a portal instead of regular render (I'm using a custom component that delegates to createPortal if available, otherwise uses renderSubtree on lifecycle events).

sophiebits · 2017-09-26T01:29:47Z

docs/_posts/2017-09-26-react-v16.0.md

+React 16 is better at hydrating server-rendered HTML. It no longer requires the initial render to exactly match the result from the server. Instead, it will attempt to reuse as much of the existing DOM as possible. No more checksums!
+
+The server renderer has also been completely rewritten to support streaming. React core team member Sasha Aicken, who worked on this feature, wrote a [great article describing React 16's SSR improvements](https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67). "Rendering to a stream can reduce the time to first byte (TTFB) for your content, sending the beginning of the document down the wire to the browser before the next part of the document has even been generated. All major browsers will start parsing and rendering the document earlier when the content is streamed from the server this way."
+


Yes. Also just that it's faster 'cause we rewrote it. This is more interesting to most people than that it uses a different hydration strategy.

sophiebits · 2017-09-26T01:31:46Z

docs/_posts/2017-09-26-react-v16.0.md

+
+### Breaking changes
+
+* React 15 had limited, undocumented support for error boundaries using `unstable_handleError`. This method has been renamed to `componentDidCatch`. You can use a codemod to [automatically migrate to the new API](https://github.com/reactjs/react-codemod#error-boundaries).


Can we just have an opening sentence like:

React 16 also includes a number of small breaking changes. These only affect uncommon use cases and we don't expect these to break most apps.

sophiebits · 2017-09-26T01:33:01Z

docs/docs/portals.md

+}
+```
+
+A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container.


Can we say explicitly somewhere that this is particularly useful for implementing modal dialogs, hovercards, and tooltips? Helps understand what it's for. Maybe worth noting the a11y requirements too though so people don't think it's too easy.

Jessidhia · 2017-09-26T02:07:30Z

docs/_posts/2017-09-26-react-v16.0.md

+* React 15 had limited, undocumented support for error boundaries using `unstable_handleError`. This method has been renamed to `componentDidCatch`. You can use a codemod to [automatically migrate to the new API](https://github.com/reactjs/react-codemod#error-boundaries).
+* `ReactDOM.render` and `ReactDOM.unstable_renderIntoContainer` now return null if called from inside a lifecycle method. To work around this, you can use [portals](https://github.com/facebook/react/issues/10309#issuecomment-318433235) or [refs[(https://github.com/facebook/react/issues/10309#issuecomment-318434635).
+* `setState`:
+  * Calling `setState` with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render.


Does this also mean that returning null from a setState function (e.g. this.setState(() => null)) will avoid triggering an update? Does this also apply to undefined so () => {} (and early returns) would work as well?

Jessidhia · 2017-09-26T02:10:45Z

docs/_posts/2017-09-26-react-v16.0.md

+* When replacing `<A />` with `<B />`,  `B.componentWillMount` now always happens before  `A.componentWillUnmount`. Previously, `A.componentWillUnmount` could fire first in some cases.
+* Previously, changing the ref to a component would always detach the ref before that component's render is called. Now, we change the ref later, when applying the changes to the DOM.
+* It is not safe to re-render into a container that was modified by something other than React. This worked previously in some cases but was never supported. We now emit a warning in this case. Instead you should clean up your component trees using `ReactDOM.unmountComponentAtNode`. [See this example.](https://github.com/facebook/react/issues/10294#issuecomment-318820987)
+* `componentDidUpdate` lifecycle no longer receives `prevContext` param. (See #8631)


Not a link (works in comments but doesn't work in .md files IIRC)

Jessidhia · 2017-09-26T02:12:56Z

docs/docs/portals.md

+
+A nice feature of portals is that, even though the DOM node can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal. 
+
+This includes event bubbling: an event fired from inside a portal will propagate to ancestors in the containing *React tree*, even if those elements are not ancestors in the *DOM tree*:


Does React stopPropagation of the original DOM event itself once it reaches the element controlled by the portal, or does the DOM event continue on its own?

No, this only affects how synthetic event propagates.

gaearon · 2017-09-26T10:05:14Z

docs/_posts/2017-09-26-react-v16.0.md

+
+React 16 includes a completely rewritten server renderer. It's really fast. It supports **streaming**, so you can start sending bytes to the client faster. And thanks to a [new packaging strategy](#reduced-file-size) that compiles away `process.env` checks (Believe it or not, reading `process.env` in Node is really slow!), you no longer need to bundle React to get good server-rendering performance.
+
+Core team member Sasha Aickin wrote a [great article describing React 16's SSR improvements](https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67). According to Sasha's tests, server rendering in React 16 is roughly **three times faster** than React 15. "When comparing against React 15 with `process.env` compiled out, there’s about a 2.4x improvement in Node 4, about a 3x performance improvement in Node 6, and a full 3.8x improvement in the new Node 8.4 release. And if you compare against React 15 without compilation, React 16 has a full order of magnitude gain in SSR in the latest version of Node!"


Should we use quote formatting here with >?

Maybe worth calling out it's a synthetic bench like the article does.

I tried a blockquote but that's what we use to format those yellow "Note: " boxes :(

gaearon · 2017-09-26T10:11:57Z

docs/_posts/2017-09-26-react-v16.0.md

+
+```js
+render() {
+  return 'Look ma, no spans!';


gaearon · 2017-09-26T10:13:46Z

docs/_posts/2017-09-26-react-v16.0.md

+
+```html
+<script crossorigin src="https://unpkg.com/react@16/dist/react.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@16/dist/react-dom.min.js"></script>


URLs have changed. These won't work.

gaearon · 2017-09-26T10:14:23Z

docs/_posts/2017-09-26-react-v16.0.md

+
+### React Addons
+
+As previously announced, we've [discontinued support for React Addons](/react/blog/2017/04/07/react-v15.5.0.html#discontinuing-support-for-react-addons). We expect the latest version of each addon (except `react-addons-perf`; see below) to work for the forseeable future, but we won't publish additional updates.


Typo: foreseeable

gaearon · 2017-09-26T10:15:58Z

docs/_posts/2017-09-26-react-v16.0.md

+
+### Packaging
+
+* There is no `react/lib/*` and `react-dom/lib/*` anymore. Even in CommonJS environments, React and ReactDOM are precompiled to single files (“flat bundles”). If you previously relied on undocumented React internals, and they don’t work anymore, let us know about your specific case in this issue, and we’ll try to figure out a migration strategy for you.


"In this issue" maybe should become "in a new issue"

gaearon · 2017-09-26T10:16:38Z

docs/_posts/2017-09-26-react-v16.0.md

+
+React also depends on `requestAnimationFrame` (even in test environments). A simple shim for testing environments would be:
+
+```


Missing JS syntax

gaearon · 2017-09-26T10:19:58Z

docs/docs/installation.md

 ```

 The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:

 ```html
-<script crossorigin src="https://unpkg.com/react@15/dist/react.min.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
+<script crossorigin src="https://unpkg.com/react@16/dist/react.min.js"></script>


Broken URLs. We probably need to update them everywhere.

(Because there is no /dist anymore. UMD builds are in /umd)

eryue0220 · 2017-09-26T14:53:40Z

Only one question: why the post date is October 26?

acdlite · 2017-09-26T14:58:10Z

@eryue0220 Uh oh, where do you see that?

eryue0220 · 2017-09-26T15:09:36Z

@acdlite the post link is: https://deploy-preview-10824--reactjs.netlify.com/blog/2017/09/26/react-v16.0.html

But the date before your name is October 26.

acdlite · 2017-09-26T15:11:14Z

@eryue0220 Nice catch! We'll be sure to fix this before publishing the new docs site.

MichaelDeBoey · 2017-09-26T16:43:21Z

👍🎉❤️

MichaelDeBoey · 2017-09-26T19:36:25Z

@acdlite Is it me or is the current docs site not updated to the new CSS yet as we can see in the Netlify deploy preview?

acdlite · 2017-09-26T19:43:30Z

@MichaelDeBoey We hit some snags with the new website that have delayed its release. Hopefully soon!

MichaelDeBoey · 2017-09-26T19:48:50Z

@acdlite No problem 🙂
Just thought there went something wrong and maybe you guys didn't notice it, so wanted to bring it to you guys' attention. 🙂

glasser · 2017-09-26T23:11:54Z

One thing I don't understand about portals from reading the docs: does the target of createPortal need to be outside of the tree currently being rendered by React (as all the examples show)? Or can you do something like a "Layout" component with "AlertBox" and "Content" children, which uses refs (or something like that) to pass the AlertBox to Content and then anywhere deeper in the Content any component can use createPortal to render stuff into AlertBox? If there's a constraint on createPortal here it would be nice if the docs were explicit.

gaearon · 2017-09-27T00:13:15Z

It's presumed to either be outside of React tree or at least always empty. I agree it's confusing.
We have #10713 open for this, and we'll probably come back to it.

@gaearon

* Update changelog for unreleased 16.0 changes (#10730) * First shot at updating changelog for 16.0 **what is the change?:** Added an 'unreleased' section to the changelog with info from #10294 **why make this change?:** To get things set for the 16.0 release. **test plan:** Visual inspection **issue:** #8854 * Fix typos and formatting errors in changelog * Add requestAnimationFrame and remove "New helpful warnings" **what is the change?:** In response to helpful code review - - Add mention of dependency on `requestAnimationFrame` and need to polyfill that as well as `Map` and `Set` - Remove "New helpful warnings" section; it was incomplete, and there are so many new and updated warnings that it might not be reasonable to cover them in the changelog. **why make this change?:** Accuracy **test plan:** Visual inspection **issue:** issue #8854 * Improve wording * Improve wording and fix missing links * Add backticks to file names & code; wording tweak * Break "Major Changes" into "New Feature" and "Breaking Changes" * Add server side render changes to 16.0 changelog * Change gist link from mine to gaearons * Add note about returning fragments * fix misc nits * Misc. formatting/wording fixes to changelog **what is the change?:** Thanks to the kind code review comments of @gaearon and @nhunzaker we have - removed the non-deterministic bold styling on some bullet points - improved wording of the bullet points for portals, attribute whitelist changes, and server rendering changes - Add note about error boundaries including a breaking change to error handling behavior. - punctuation and capitalization fixes **why make this change?:** Clarity and correctness **test plan:** Visual inspection **issue:** #8854 * fix broken link * Fixes #9667: Updated createTextInstance to create the text node on correct document (#10723) * Record sizes * Add a changelog for elements having the same key (#10811) * Add a changelog for elements having the same key * Reword * Markdown fixs on "DOM Attributes in React 16" post (#10816) * Include tag name into the table snapshot (#10818) * Update DOM warning wording and link (#10819) * Update DOM warning wording and link * Consistently use "Invalid" for known misspellings * Update license headers BSD+Patents -> MIT Did find and replace in TextMate. ``` find: (?:( \*)( ))?Copyright (?:$c$ )?(\d{4})\b.+Facebook[\s\S]+(?:this source tree|the same directory)\.$ replace: $1$2Copyright (c) $3-present, Facebook, Inc.\n$1\n$1$2This source code is licensed under the MIT license found in the\n$1$2LICENSE file in the root directory of this source tree. ``` * Change license and remove references to PATENTS Only remaining references: ``` docs/_posts/2014-10-28-react-v0.12.md 51:You can read the full text of the [LICENSE](https://github.com/facebook/react/blob/master/LICENSE) and [`PATENTS`](https://github.com/facebook/react/blob/master/PATENTS) files on GitHub. docs/_posts/2015-04-17-react-native-v0.4.md 20:* **Patent Grant**: Many of you had concerns and questions around the PATENTS file. We pushed [a new version of the grant](https://code.facebook.com/posts/1639473982937255/updating-our-open-source-patent-grant/). src/__mocks__/vendor/third_party/WebComponents.js 8: * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt ``` * Version bumps to use MIT license * Add ReactTestRenderer documentations (#10692) * Add ReactTestRenderer documentations * Add TestRenderer documentations * TestRenderer is not experiment * Add a link for jsdom * Use ES Modules syntax * Twaek * Add a Link component * Use Jest assertions * Move a documentation for createNodeMock to Idea section * Renamed * Tweak * Rename * More explicit * Add a usecase for createNodeMock * Add changelog for 15.6.2 * Add 15.6.2 blog post to master * Add Nate to authors on master * Bump object-assign patch range to match main package.json * Flow should ignore node_modules/create-react-class * Update error codes * Update CHANGELOG for React 16 * v16.0.0 * Doc updates for React 16 + blog post (#10824) * Doc updates for React 16 + blog post * Add link to Sophie's post * Fix React links on the website (#10837) * Fix React links on the website * Fix code editor * Fix code editor, attempt 2 * Doc change for prevContext removal in CDU (#10836) * Doc change for prevContext removal in CDU Ref: #8631 * Minor rewording * Fix note formatting * React.createPortal is not a function (#10843) * Update Portals Documentation (#10840) * Update Portals Documentation Correct some grammar to be more explicit and clear. Update example CodePen to better match code found in documentation. Update code example styles to match other code examples (ie. 'State and Lifecycle', 'Handling Events'). * Clean up comment to be accurate to example There was a small comment overlooked when reviewing the documentation. This fixes it to be accurate to the example as well as grammatically correct. * Update portals.md * More fixes * Update name of property initializer proposal (#10812) The proposal for property initializers is called [Public Class Fields](https://tc39.github.io/proposal-class-public-fields/) now (part of the combined [Class Fields](https://github.com/tc39/proposal-class-fields) proposal). * Fix portal link (#10845) * Update docs for React 16 (#10846) * Minor doc edit * Rename urls

facebook-github-bot added the CLA Signed label Sep 25, 2017

nhunzaker reviewed Sep 25, 2017

View reviewed changes

flarnie reviewed Sep 25, 2017

View reviewed changes

docs/_posts/2017-09-26-react-v16.0.md Outdated

### Better error handling

Copy link

Contributor

flarnie Sep 25, 2017

Choose a reason for hiding this comment

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

nit - extra newline

flarnie reviewed Sep 25, 2017

View reviewed changes

flarnie reviewed Sep 26, 2017

View reviewed changes

acdlite force-pushed the react16docs branch from 1a30c54 to 5778629 Compare September 26, 2017 00:04

koba04 reviewed Sep 26, 2017

View reviewed changes

clemmy reviewed Sep 26, 2017

View reviewed changes

gaearon reviewed Sep 26, 2017

View reviewed changes

sophiebits reviewed Sep 26, 2017

View reviewed changes

Jessidhia reviewed Sep 26, 2017

View reviewed changes

acdlite changed the base branch from gatsby to master September 26, 2017 08:13

acdlite force-pushed the react16docs branch 4 times, most recently from d13e207 to 254b7d2 Compare September 26, 2017 09:54

gaearon reviewed Sep 26, 2017

View reviewed changes

acdlite force-pushed the react16docs branch from 254b7d2 to acc8c47 Compare September 26, 2017 15:22

acdlite added 2 commits September 26, 2017 09:02

Doc updates for React 16 + blog post

d3c4adb

Add link to Sophie's post

ad22669

acdlite force-pushed the react16docs branch from acc8c47 to ad22669 Compare September 26, 2017 16:03

acdlite merged commit 5f6326f into facebook:master Sep 26, 2017

bvaughn mentioned this pull request Sep 27, 2017

Merged master and resolved conflicts #10893

Merged


		Although React 16 includes significant internal changes, in terms of upgrading, you can think of this like any other major React release. We've been serving React 16 to Facebook and Messenger.com users since earlier this year, and we released several beta and release candidate versions to flush out additional issues. With minor exceptions, if your app runs in 15.6 without any warnings, it should work in 16.

		Deprecations


		### New core architecture

		React 16 is the first version of React built on top of a new core architecture, codenamed "Fiber." You can read all about this project over on Facebook's engineering blog (TODO: link). (Spoiler: we rewrote React!)


		A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container.

		[Try out an example on CodePen.](https://codepen.io/acdlite/pen/JrKgmz)


		That amounts to a combined 32% size decrease compared to the previous version (30% post-gzip).

		The size difference is partly attributable to a change in packaging. React now uses [Rollup](https://rollupjs.org/) to create flat bundles for each of its different target formats, resulting in both size and runtime performance wins. The

		```

		Support for returning strings from the render method has also been added.


		React 16 is better at hydrating server-rendered HTML. It no longer requires the initial render to exactly match the result from the server. Instead, it will attempt to reuse as much of the existing DOM as possible. No more checksums!

		The server renderer has also been completely rewritten to support streaming. React core team member Sasha Aicken, who worked on this feature, wrote a [great article describing React 16's SSR improvements](https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67). "Rendering to a stream can reduce the time to first byte (TTFB) for your content, sending the beginning of the document down the wire to the browser before the next part of the document has even been generated. All major browsers will start parsing and rendering the document earlier when the content is streamed from the server this way."


		### Deprecations

		Hydrating a server-rendered container now has an explicit API. Use ReactDOM.hydrate instead of ReactDOM.render if you're reviving server-rendered HTML. Keep using ReactDOM.render if you're just doing client-side rendering.

		## Upgrading

		Although React 16 includes significant internal changes, in terms of upgrading, you can think of this like any other major React release. We've been serving React 16 to Facebook and Messenger.com users since earlier this year, and we released several beta and release candidate versions to flush out additional issues. With minor exceptions, if your app runs in 15.6 without any warnings, it should work in 16.

		### Better error handling


		Previously, runtime errors during rendering could potentially put React in a broken state, producing cryptic error messages and requiring a page refresh to recover. To address this problem, React 16 uses a more resilient error-handling strategy. By default, if an error is thrown inside a component's render or lifecycle methods, the whole component tree is unmounted from the root. This prevents the display of corrupted data. However, it's probably not the ideal user experience.


		### Better server-side rendering

		React 16 is better at hydrating server-rendered HTML. It no longer requires the initial render to exactly match the result from the server. Instead, it will attempt to reuse as much of the existing DOM as possible. No more checksums!


		### Breaking changes

		* React 15 had limited, undocumented support for error boundaries using `unstable_handleError`. This method has been renamed to `componentDidCatch`. You can use a codemod to [automatically migrate to the new API](https://github.com/reactjs/react-codemod#error-boundaries).


		A nice feature of portals is that, even though the DOM node can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal.

		This includes event bubbling: an event fired from inside a portal will propagate to ancestors in the containing React tree, even if those elements are not ancestors in the DOM tree:


		React 16 includes a completely rewritten server renderer. It's really fast. It supports streaming, so you can start sending bytes to the client faster. And thanks to a [new packaging strategy](#reduced-file-size) that compiles away `process.env` checks (Believe it or not, reading `process.env` in Node is really slow!), you no longer need to bundle React to get good server-rendering performance.

		Core team member Sasha Aickin wrote a [great article describing React 16's SSR improvements](https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67). According to Sasha's tests, server rendering in React 16 is roughly three times faster than React 15. "When comparing against React 15 with `process.env` compiled out, there’s about a 2.4x improvement in Node 4, about a 3x performance improvement in Node 6, and a full 3.8x improvement in the new Node 8.4 release. And if you compare against React 15 without compilation, React 16 has a full order of magnitude gain in SSR in the latest version of Node!"


		### React Addons

		As previously announced, we've [discontinued support for React Addons](/react/blog/2017/04/07/react-v15.5.0.html#discontinuing-support-for-react-addons). We expect the latest version of each addon (except `react-addons-perf`; see below) to work for the forseeable future, but we won't publish additional updates.


		### Packaging

		* There is no `react/lib/` and `react-dom/lib/` anymore. Even in CommonJS environments, React and ReactDOM are precompiled to single files (“flat bundles”). If you previously relied on undocumented React internals, and they don’t work anymore, let us know about your specific case in this issue, and we’ll try to figure out a migration strategy for you.


		React also depends on `requestAnimationFrame` (even in test environments). A simple shim for testing environments would be:

		```

Doc updates for React 16 + blog post #10824

Doc updates for React 16 + blog post #10824

Conversation

acdlite commented Sep 25, 2017

Choose a reason for hiding this comment

reactjs-bot commented Sep 25, 2017 • edited Loading

nhunzaker left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flarnie commented Sep 26, 2017

Choose a reason for hiding this comment

gaearon commented Sep 26, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jessidhia Sep 26, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon Sep 26, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sophiebits left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jessidhia Sep 26, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jessidhia Sep 26, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

acdlite Sep 26, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eryue0220 commented Sep 26, 2017

acdlite commented Sep 26, 2017 • edited Loading

eryue0220 commented Sep 26, 2017

acdlite commented Sep 26, 2017

MichaelDeBoey commented Sep 26, 2017

MichaelDeBoey commented Sep 26, 2017 • edited Loading

acdlite commented Sep 26, 2017

MichaelDeBoey commented Sep 26, 2017

glasser commented Sep 26, 2017

gaearon commented Sep 27, 2017

reactjs-bot commented Sep 25, 2017 •

edited

Loading

Jessidhia Sep 26, 2017 •

edited

Loading

gaearon Sep 26, 2017 •

edited

Loading

Jessidhia Sep 26, 2017 •

edited

Loading

Jessidhia Sep 26, 2017 •

edited

Loading

acdlite Sep 26, 2017 •

edited

Loading

acdlite commented Sep 26, 2017 •

edited

Loading

MichaelDeBoey commented Sep 26, 2017 •

edited

Loading