React 16 Umbrella ☂️ (and 15.5)

[gaearon]

This list might change, just putting it out there as the first draft. Posting these together since they're related, and we don't plan more 15.x releases after 15.5 anyway.

To put these changes in context, we have a few goals:

(Click to show)

* For the past several months, we have been working on a [rewrite of React codenamed “Fiber”](https://www.youtube.com/watch?v=aV1271hd9ew&feature=youtu.be). Initially, it won’t affect public API, but it brings several new features (like https://github.com/facebook/react/issues/2127 and https://github.com/facebook/react/issues/2461). Fiber gives us a solid foundation to improve React core in numerous ways. We’ll be talking more about it soon, and we intend to ship it with React 16 by default. * To reduce the bundle size, we need to remove the APIs that we don't recommend, such as `createClass` and `React.DOM.*` helpers. We intend to warn once about their usage so that you can start removing dependencies on them. They will still be available as separate packages, but we will exclude them from the default build of React 16. * We would like to have more control over the bundles so that we can better optimize them. This is why we are considering switching to flat bundles (and thus removing access to React internals in `react/lib/*` and `react-dom/lib/*`) in React 16. This will also mean faster compile times by default for users of Webpack and other bundlers, and faster server-side rendering performance.

Here’s a speculative list of changes we think of doing in these releases:

Past Releases

I’ve moved these to the end of this post.

16 Final

• [x] https://github.com/facebook/react/issues/10625 (@flarnie & @sophiebits)
• [x] Check if https://github.com/facebook/react/pull/10142 is a real regression (@nhunzaker, @aweary)
• [x] Check Google issue (still exists after RC2 turns out to be polyfill.io bug, https://github.com/Financial-Times/polyfill-service/issues/1299) https://www.reddit.com/r/javascript/comments/6pqrz5/comment/dmrl0nh
• [x] Figure out what we want to do regarding https://github.com/facebook/react/pull/10612 and https://github.com/facebook/react/issues/10672 @gaearon
• [x] Ensure Enzyme isn't blocked on anything from our side for 16 compat. (@flarnie)
• [x] Remove unstable_ prefix from unstable_createPortal and alias it @gaearon https://github.com/facebook/react/pull/10675
• [x] Ensure we show a sensible warning for this case https://github.com/facebook/react/pull/10673 @gaearon
• [x] Preparing for the Final Release: (React team in general)
  • [x] Write blog post adapted from #10294 (@acdlite)
  • [x] Add attribute info to big changes section
  • [x] Consolidate/remove "Updates" section at the end
  • [x] Server hydration: make hydration changes more prominent in breaking changes section, maybe write a full blog post later (https://github.com/facebook/react/issues/10591)
• [x] Release an update to DevTools with https://github.com/facebook/react-devtools/pull/892
• [x] Website (@bvaughn and @flarnie)
• [x] Docs
  • [x] Document ability to return strings and arrays from render
  • [x] Document createPortal()
  • [x] Merge server streaming doc into regular dom server doc and fix imports to match new unified entry point
  • [x] Test renderer https://github.com/facebook/react/pull/10692
• [x] Right after release:
  • [x] Update CDN URLs on website and official fiddle to reference new paths (/umd/* rather than sebmt/*)
  • [x] Update doc snippets (such as all codepens on the website!) to use 16.

TODO: Add any bugs discovered while testing RC.

16 Wishlist

• [x] Fix hot reloading in RN (probably needs unstable_forceUpdateDeep() and then change https://github.com/gaearon/react-deep-force-update to use it)
• [x] Show a better message for missing React (https://github.com/facebook/react/issues/10406)
• [x] Make sure we offer a way of canceling setState updater form (https://twitter.com/nishb1/status/852542873803345920) (@gaearon will follow up)
• [x] Remove Stack and compat code
• [x] Add support to Enzyme for Fiber (airbnb/enzyme#1007)

---

Past Releases

# 15.5 (Click to show)

- [x] ReactDOM fixes, if @jquense @nhunzaker @aweary want to release any. - [x] We should probably ship a fix for https://github.com/facebook/react/issues/8487 (https://github.com/facebook/react/pull/9005) - [x] New warning: callback refs on stateless functional components (https://github.com/facebook/react/pull/8635, https://github.com/facebook/react/pull/8739) - [x] New API deprecations: - [x] `React.createClass` (will be moved to a separate package, [and we provide a codemod](https://github.com/reactjs/react-codemod#explanation-of-the-new-es2015-class-transform-with-property-initializers) if you want to update to ES classes) - [ ] ~~`React.createFactory` (will be moved to a separate package or removed, it's a [one-liner](https://github.com/facebook/react/blob/eb89bc4c301c5970b1ec88d3fdfa2202d4dca4f8/src/isomorphic/classic/element/ReactElement.js#L271-L272))~~ - [ ] `React.DOM.*` factories (will be moved to a separate package, https://github.com/facebook/react/pull/8356) **We forgot to do it. Moving to 15.6** - [ ] `React.createMixin` (will be removed, https://github.com/facebook/react/pull/8853) **We forgot to do it. Moving to 15.6** - [x] `React.propTypes` (will be moved to a separate package) - [x] Deprecate React addons https://github.com/facebook/react/issues/9207 - [x] Decide how to handle all of this with the UMD addons build - [x] Fix this bug https://github.com/facebook/react/issues/9351

# 15.6 See https://github.com/facebook/react/issues/9398. # 16 Alpha (Click to show)

- [x] Remove deprecations added in 15 - [x] Stop appending `px` to strings (https://github.com/facebook/react/pull/6899) - [x] Remove `LinkedStateMixin`, `valueLink` and `checkedLink` (https://github.com/facebook/react/pull/8165) - [x] Remove `React.__spread` and `React.createMixin` - [x] Move `React.createClass` to a separate package - [x] Move `PropTypes` to a separate package. - [x] Move `React.DOM.*` factories to a separate package - [x] Decide what to do with the addons build - [x] If we keep any addons, they need to work regardless of whether React is aliased to a flat bundle or not (which is not the case now) - [x] Strip PropTypes checkers in production build (https://github.com/facebook/react/pull/8066) - [x] Re-add warning about calling PropTypes directly (https://github.com/facebook/react/issues/8080) - [X] More ReactDOM fixes, if @jquense @nhunzaker @aweary want to release any. - [x] Make a decision on the input fix by @jquense (for now accepted, but follow up work will change this. @flarnie link to issue on related follow up work)

# 16 Beta (Click to show)

- [x] Actually enable fragments (@flarnie verified this) - [x] Make error boundaries official (@bvaughn) - [x] Choose lifecycle naming - [x] Codemod stuff - [x] Decide whether to runtime warn for the old name (decided: let's not do it) - [x] Fix the issue with `invokeGuardedCallback` (tracking in https://github.com/facebook/react/issues/9577, @acdlite is working on this) - [x] (This came up internally) Set a hard limit for recursion https://github.com/facebook/react/issues/9193. (@acdlite) - [x] Duplicate React + string refs results in very confusing error (ref is not a function). We should provide a good invariant for that. (https://github.com/facebook/react/issues/9962, @spicyj @flarnie and @gaearon) (is this Draft issue also about this? https://github.com/facebook/draft-js/issues/296) - [x] Is there a test for this? (@flarnie) - [x] Warn (throw?) when doing an update on a container that was manually emptied outside of React (in stack, this mounted a brand-new tree; in fiber, it tries to apply an update and usually fails) (@flarnie in https://github.com/facebook/react/pull/10210) - [x] Is there a test for this? (@flarnie) - [x] Additional APIs we need in order to start experimenting with async. (@acdlite) - [x] `React.unstable_AsyncComponent` - [x] `ReactDOM.flushSync(batch)` - [x] sanity test - use in a CRA app, and check fixtures - [x] Messaging - [x] Update isfiberreadyyet.com - [x] Compose a Tweet

# 16 RC (Click to show)

- [x] [m-l] Pass DOM props through (https://github.com/facebook/react/issues/10399, latest is: https://github.com/facebook/react/pull/10416) (@gaearon, @spicyj, @sebmarkbage, @flarnie, @acdlite) - [x] Regression: we should warn if object is passed to an event listener prop #10407 (@aweary) (fixed? in https://github.com/facebook/react/pull/10453 but needs review updated and merged) - [x] Make sure input variables (props, state) point to the correct values for each lifecycle. Example where this isn't the case for `componentWillMount`: https://jsfiddle.net/m3pL3yaj/ (@acdlite) (fixed in #10481) - [x] `select`'s onChange event fires with incorrect selectedIndex, value (https://github.com/facebook/react/issues/10420 @sebmarkbage) - [x] How do we ensure weak minifiers don't ship the bundle twice? https://github.com/facebook/react/issues/9589 (@flarnie, @trueadm) (fixed in https://github.com/facebook/react/pull/10446) - [x] Bug: SSR has false positive warnings for SVG tags #10415 (@spicyj) (fixed in https://github.com/facebook/react/pull/10452) - [x] Bug: Unexpected cross-domain error passed to `componentDidCatch` #10441 (@bvaughn) (fixed in https://github.com/facebook/react/pull/10447) - [x] Warn when nesting a 15 tree inside 16 (@spicyj https://github.com/facebook/react/pull/10434) (fixed in https://github.com/facebook/react/pull/10434) - [x] undefined is not a function (evaluating 'owner.getName()') https://github.com/facebook/react/issues/10443 - [x] Regressions reported in beta - [x] The server renderer crashes in production with inline styles. (https://github.com/facebook/react/issues/10299, fixed by https://github.com/facebook/react/pull/10300) - [x] The server renderer doesn't yet support returning arrays and strings from components (fixed by #10221) - [x] The server renderer still renders `data-reactid` somewhat unnecessarily. (https://github.com/facebook/react/issues/10306) (@gaearon) - [x] Potentially fixed by https://github.com/facebook/react/pull/10339 (@gaearon) - [x] In some cases `Error: null` is reported instead of the real error. (https://github.com/facebook/react/issues/10321) [decision: update the error message] (@acdlite) - [x] Shallow renderer doesn't implement `unstable_batchedUpdates`. [decision: team seems to be leaning away from doing this; discussion in #10355] - [x] [s-m] `shouldComponentUpdate` with functional components [decision: delete it for now, add it in a minor] (@sebmarkbage) https://github.com/facebook/react/pull/10371 - [x] There is a report that Google crawler can’t render the page using 16 ([link](https://www.reddit.com/r/javascript/comments/6pqrz5/react_16_beta/dkrgvzj/?utm_content=permalink&utm_medium=front&utm_source=reddit&utm_name=javascript)). (@flarnie) - [x] Check if https://github.com/facebook/react/issues/10405 is a real regression (No, it's been fixed looks like.) - [x] [s-m] Ensure type validation didn't regress when we enabled new features https://github.com/facebook/react/issues/9577 (@gaearon) - [x] Decide if we want to break value attribute syncing behavior (https://github.com/facebook/react/pull/10150) [decided to postpone until 17] - [x] [s-m] Decide if we want to stop calling `componentDidUpdate` from shallow renderer (https://github.com/facebook/react/pull/10372) - [x] Decide: what do we do about polyfills? - [x] Map/Set (need to throw early, @gaearon) https://github.com/facebook/react/pull/10356 - [x] Object.assign (keep or assume it's there?) https://github.com/facebook/react/pull/10280 [decision: keep it bundled for now] - [x] rAF [decision: keep it required] (Maybe use the same approach/standard as Relay? https://facebook.github.io/relay/docs/relay-modern.html#javascript-environment-requirements) - [x] Big missing pieces - [x] Add server rendering and reviving - [x] Add shallow renderer - [x] We seem to be decoupling shallow renderer from ReactDOM. However in 15 `findDOMNode()` works inside of shallow renderer because it contains ReactDOM injections. Is this going to be a breaking change? (@gaearon) [decision: let's not support this] - [x] Decide on whether to include warning whitelisting/blacklisting (@bvaughn) [decision: not in 16.0] - [x] Maybe: Switch to flat bundles (no more `react-dom/lib/*`, internals are truly private) - [x] Decide: plan forward for popular projects depending on internals (`react-native-web`, `react-tap-event-plugin`) (might not block final) - [x] `EventPluginHub` is "dangerously" exported from flat bundle for tap event plugin - [x] `react-native-web` probably needs more internals, coordinate with @necolas (done in https://github.com/facebook/react/pull/10138) - [x] Support `class` and `for` https://github.com/facebook/react/pull/10169 (@gaearon) [decision: not gonna do this now] - [x] Feature parity for renderers - [x] Shallow renderer supports strings and arrays - [x] Server renderer supports strings and arrays - [x] Server renderer supports error boundaries [doesn't make sense conceptually right now] - [x] Decide on whether to put `react-current-owner` in its own package to reduce issues caused by npm duplication [not now] - [x] Decide on DOMServer entry points (`react-dom/server` and `react-dom/node-stream` seem inconsistent with each other. Why is only one of them `server`?) (@gaearon) https://github.com/facebook/react/pull/10362 * These were configured separately for Prepack. One target includes both the pure JS APIs and the Node APIs and the other only includes the pure JS APIs. We could combine them into a single `react-dom/server` entry point and add a new `renderToString` method on it. - [x] Decide: Do we care about catching errors in events in the initial release? [no] - [x] Error messages (@flarnie) (Dan: I moved this back to blockers because I don't think we can release with unclear messages. Error boundaries are a huge change in open source and we must have documentation and a link before we start unmounting roots.) - [x] "You can add an error boundary" message should link to docs - [x] duplicate key warning for children with same keys is out of date; claims child will be ignored but now we will only render second one. (easy to add to 16 final or sooner) (@sebmarkbage) - [x] Verify that the bundles produced are valid in strict mode. https://github.com/facebook/react/issues/10294#issuecomment-319490960 (@bvaughn) - [x] Testing the Beta: (React team in general) - [x] Share the beta and proposed release date with library authors several weeks in advance - [x] Triage any issues reported with beta.

[rashidul0405]

@vicbell because it's not ready yet :)

[diar-k]

Anyone knows when React 16 gets released or have an idea? Also will it be easy to migrate an existing create-react-app to React 16 when it releases? And is it worth using React 16 instead of 15 if you are creating a streaming movie website like netflix? Thanks.

[bvaughn]

Anyone knows when React 16 gets released or have an idea?

The team hasn't yet announced (or settled on) a release date.

Also will it be easy to migrate an existing create-react-app to React 16 when it releases?

Yes, that's the plan. One of the primary purposes of the 15.5 and 15.6 releases was to add deprecation warnings to prepare people for 16.0.

And is it worth using React 16 instead of 15 if you are creating a streaming movie website like netflix?

It should be fine to use 15 for now and upgrade once 16 is released. Pay attention to any dev-mode warning messages in 15 about things that have been deprecated and you should have no problems.

[flarnie]

Just updated this with remaining open issues from Phases 6.1-6.3 of https://github.com/facebook/react/issues/7925 and I'm archiving that issue. We can still reference the open items for Phase 7-9 when planning future work for Fiber and future releases.

[rchanou]

Update: Fixed now. Ignore everything below!

(Click to view old post)

FYI, these sections are misformatted. Fixed below. # 15.5

- [x] ReactDOM fixes, if @jquense @nhunzaker @aweary want to release any. - [x] We should probably ship a fix for https://github.com/facebook/react/issues/8487 (https://github.com/facebook/react/pull/9005) - [x] New warning: callback refs on stateless functional components (https://github.com/facebook/react/pull/8635, https://github.com/facebook/react/pull/8739) - [x] New API deprecations: - [x] `React.createClass` (will be moved to a separate package, [and we provide a codemod](https://github.com/reactjs/react-codemod#explanation-of-the-new-es2015-class-transform-with-property-initializers) if you want to update to ES classes) - [ ] ~~`React.createFactory` (will be moved to a separate package or removed, it's a [one-liner](https://github.com/facebook/react/blob/eb89bc4c301c5970b1ec88d3fdfa2202d4dca4f8/src/isomorphic/classic/element/ReactElement.js#L271-L272))~~ - [ ] `React.DOM.*` factories (will be moved to a separate package, https://github.com/facebook/react/pull/8356) **We forgot to do it. Moving to 15.6** - [ ] `React.createMixin` (will be removed, https://github.com/facebook/react/pull/8853) **We forgot to do it. Moving to 15.6** - [x] `React.propTypes` (will be moved to a separate package) - [x] Deprecate React addons https://github.com/facebook/react/issues/9207 - [x] Decide how to handle all of this with the UMD addons build - [x] Fix this bug https://github.com/facebook/react/issues/9351

# 16 Alpha

- [x] Remove deprecations added in 15 - [x] Stop appending `px` to strings (https://github.com/facebook/react/pull/6899) - [x] Remove `LinkedStateMixin`, `valueLink` and `checkedLink` (https://github.com/facebook/react/pull/8165) - [x] Remove `React.__spread` and `React.createMixin` - [x] Move `React.createClass` to a separate package - [x] Move `PropTypes` to a separate package. - [x] Move `React.DOM.*` factories to a separate package - [x] Decide what to do with the addons build - [x] If we keep any addons, they need to work regardless of whether React is aliased to a flat bundle or not (which is not the case now) - [x] Strip PropTypes checkers in production build (https://github.com/facebook/react/pull/8066) - [x] Re-add warning about calling PropTypes directly (https://github.com/facebook/react/issues/8080) - [X] More ReactDOM fixes, if @jquense @nhunzaker @aweary want to release any. - [x] Make a decision on the input fix by @jquense (for now accepted, but follow up work will change this. @flarnie link to issue on related follow up work)

[flarnie]

Thanks @rchanou - correct me if I'm missing something, but it looks like you remove the indentations on the checkbox lists and the words '(Click to show)' above the 'Details' dropdowns.

The indentations were intentional - the indented items are related to the previous un-indented item, but maybe we didn't make the relationship clear enough.

I think the words '(Click to show)' were added because of confusion when people saw the 'Details' dropdown. I don't know how common it is to use the <details> tag on Github and people may not be used to it.

I'm happy to make changes to fix any other formatting issues, and thanks again!

[rchanou]

@flarnie, since the original post is fixed I hid my "fix" (which I realize needed some fixing itself 😅). Thanks!

[iddan]

When will I be able to return strings in component's render? As we use the 16 alpha w/ RN I thought this is already possible

[gaearon]

RN does not use Fiber yet. The "react" package is not very relevant here because it doesn't contain the reconciler logic. It only has helpers like createElement and Component. So it's not Fiber. We'll switch RN to Fiber some time soon but don't have an exact date.

[gaearon]

16 is out. Remaining items moved to https://github.com/facebook/react/issues/11088.