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

React 16 RC #10294

Closed
bvaughn opened this issue Jul 26, 2017 · 254 comments
Closed

React 16 RC #10294

bvaughn opened this issue Jul 26, 2017 · 254 comments

Comments

@bvaughn
Copy link
Contributor

bvaughn commented Jul 26, 2017

The third React 16 RC is now available for public testing. 🎉

Installation Instructions

The RC has been published to NPM with the tag "next". Regular NPM installs will continue to use the 15.6 release. To install the RC use:

yarn add react@next react-dom@next

Or:

npm install --save react@next react-dom@next

What Does React 16 Mean for You?

React 16 is the first release that ships with a rewrite of the React core (previously codenamed “Fiber”). This rewrite had a few goals:

  • Remove old internal abstractions that didn’t age well and hindered internal changes.
  • Let us ship some of the most requested features like returning arrays from render, recovering from component errors, and readable component stack traces for every error.
  • Enable us to start experimenting with asynchronous rendering of components for better perceived performance.

This initial React 16.0 release is mostly focused on compatibility with existing apps. It does not enable asynchronous rendering yet. We will introduce an opt-in to the async mode later during React 16.x. We don’t expect React 16.0 to make your apps significantly faster or slower, but we’d love to know if you see improvements or regressions.

JavaScript Environment Requirements

React 16 depends on the collection types Map and Set. If you support older browsers and devices which may not yet provide these natively (eg <IE11), consider including a global polyfill in your bundled application, such as core-js or babel-polyfill.

A polyfilled environment for React 16 using core-js to support older browsers might look like:

import 'core-js/es6/map';
import 'core-js/es6/set';

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

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

global.requestAnimationFrame = function(callback) {
  setTimeout(callback, 0);
};

Points of Interest

  • This is a complete rewrite of React but we expect it to work with your existing code. If you fixed all deprecation warnings introduced in 15.x, the 16 beta should work for you.
  • Third party libraries that relied on deprecated or unsupported APIs may need updates to work correctly with this new release. Now is a good time to file issues against libraries that have problems. (And tell us if we broke something!)
  • We are particularly interested in hearing about performance differences you notice between 15.x and 16.x. We don't expect any massive changes but would love to know about improvements or regressions. Please report them here!
  • The server renderer has been completely rewritten, and now offers a streaming mode (ReactDOMServer.renderToNodeStream() and ReactDOMServer.renderToStaticNodeStream()). Server rendering does not use markup validation anymore, and instead tries its best to attach to existing DOM, warning about inconsistencies. And there is no data-reactid anymore! This server renderer code is still very new, so it is likely to have issues. Please report them.
  • 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.
  • React Native follows a different release cycle and will update to the beta in a future release. (It's already using an alpha release but not yet using Fiber.)

Breaking Changes

Error Handling

  • Previously, runtime errors used to put React into a broken state and produce cryptic errors. React 16 fixes this by introducing a special kind of components called “error boundaries”. Error boundaries can catch runtime errors in a component tree, log them, and display a fallback UI instead.
  • If there is an uncaught error in a component, and there is no error boundary up in the tree, the whole component tree will be unmounted. This helps avoid very nasty bugs where the UI has been corrupted due to an error, but it means that you need to add a few error boundaries to your app to handle the errors gracefully.
  • React 15 had a very limited undocumented support for error boundaries with a different method name. It used to be called unstable_handleError, but has been renamed to componentDidCatch.

You can learn more about the new error handling behavior here.

Scheduling and Lifecycle

  • ReactDOM.render() and ReactDOM.unstable_renderIntoContainer() now return null if called from inside a lifecycle method.
  • 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.
    • Calling setState directly in render always causes an update. This was not previously the case. Regardless, you should not be calling setState from render.
    • setState callback (second argument) now fires immediately after componentDidMount / componentDidUpdate instead of after all components have rendered.
  • 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.
  • componentDidUpdate lifecycle no longer receives prevContext param. (See Pass prevContext param to componentDidUpdate #8631)
  • 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

  • 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.
  • There is no react-with-addons.js build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them.
  • The deprecations introduced in 15.x have been removed from the core package. React.createClass is now available as create-react-class, React.PropTypes as prop-types, React.DOM as react-dom-factories, react-addons-test-utils as react-dom/test-utils, and shallow renderer as react-test-renderer/shallow. See 15.5.0 and 15.6.0 blog posts for instructions on migrating code and automated codemods.
  • The names and paths to the single-file browser builds have changed to emphasize the difference between development and production builds. For example:
    • react/dist/react.jsreact/umd/react.development.js
    • react/dist/react.min.jsreact/umd/react.production.min.js
    • react-dom/dist/react-dom.jsreact-dom/umd/react-dom.development.js
    • react-dom/dist/react-dom.min.js → react-dom/umd/react-dom.production.min.js

Known Issues

Updates

@dmitrif
Copy link

dmitrif commented Jul 26, 2017

In regards to:

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.

We have been relying on https://github.com/electrode-io/electrode-react-ssr-caching which monkey-patches the React render. Any suggestions as to how to make it work with v16?

Used imports:

const ReactCompositeComponent = require("react-dom/lib/ReactCompositeComponent");
const DOMPropertyOperations = require("react-dom/lib/DOMPropertyOperations");

Thank you.

@aweary
Copy link
Contributor

aweary commented Jul 26, 2017

Maybe @aickin can comment on the feasibility of integrating a caching solution directly into the server renderer?

@verkholantsev
Copy link

This initial React 16.0 release is mostly focused on compatibility with existing apps. It does not enable asynchronous rendering yet. We will introduce an opt-in to the async mode later during React 16.x.

Is there any way to manually enable asynchronous rendering in this beta?

@TrySound
Copy link
Contributor

@verkholantsev Afaik there is an option. Or will be.

@verkholantsev
Copy link

@TrySound Could you tell more about this option? Or could you tell me in what direction should I start my research about it?

@bvaughn
Copy link
Contributor Author

bvaughn commented Jul 26, 2017

@verkholantsev We'll provide info about enabling async once we think it's ready for testing. We're still experimenting on it internally.

@sergeysova
Copy link

Can I import SynteticEvent from flat bundle?

@kadikraman
Copy link

kadikraman commented Jul 26, 2017

This might be interesting: just tried it in our codebase. Using yarn to install the package, I get an error in HMR and from one of our dependencies, but using npm (I'm on 5.2.0), it works! 🎉

@gaearon
Copy link
Collaborator

gaearon commented Jul 26, 2017

Can I import SynteticEvent from flat bundle?

Not currently. What is your use case for it?

Using yarn to install the package, I get an error in HMR and from one of our dependencies, but using npm (I'm on 5.2.0), it works!

We’ll need more details to tell if something is wrong. I’d appreciate if you could provide a reproducing project (even if it only fails with Yarn).

@sergeysova
Copy link

sergeysova commented Jul 26, 2017

@gaearon

Not currently. What is your use case for it?

Ex.: I want to pass change event to parent when toggle button.
Or I want to modify event before pass to parent.

// pseudocode
onClickItem(event) {
  const newEvent = new SynteticEvent('change', { id: this.state.currentId })
  this.props.onChange(newEvent)
}

@mbifulco
Copy link

So far, everything runs smoothly save for my test cases of rendered components, because they depend on:

import { mount, shallow } from 'enzyme';

which results in dependency errors like this:

react-dom is an implicit dependency in order to support react@0.13-14. Please add the appropriate version to your devDependencies. See https://github.com/airbnb/enzyme#installation

This is an app that was built from CRA - it is not ejected. This appears to be the only place in which we use enzyme (tests are run with react-scripts test --env=jsdom --coverage). Is there an equivalent of mount and shallow within Jest that I should be using?

@tomasztomys
Copy link

@muhammedMoussa
Copy link

when react enable me to call API with any built in package like $http in angular, without force me to use staff like superagent or axios ..

@markerikson
Copy link
Contributor

@muhammedMoussa : that is not a goal for React, and React will not be shipping a built-in HTTP client library.

@gaearon
Copy link
Collaborator

gaearon commented Jul 26, 2017

Let’s keep this discussion focused on 16 Beta. Thanks.

@mridgway
Copy link
Contributor

A compiled list of all deprecations that have been removed from 15 -> 16 would be helpful as a checklist for upgrading.

Related: is the warning for unknown attributes (via the whitelist) still in place or will upgrading to 16 start adding them to the DOM without warning?

@gaearon
Copy link
Collaborator

gaearon commented Jul 26, 2017

A compiled list of all deprecations that have been removed from 15 -> 16 would be helpful as a checklist for upgrading.

I think it’s React.createClass, React.PropTypes, React.__spread, React.createMixin , and React.DOM.*. There are a few changes to entry points too (e.g. shallow renderer is now react-test-renderer/shallow, and test utils moved to react-dom/test-utils). I believe they all are mentioned in these blog posts:

Related: is the warning for unknown attributes (via the whitelist) still in place or will upgrading to 16 start adding them to the DOM without warning?

This is sort of up in the air right now. I think we’ll make a decision before shipping next beta.

@wmertens
Copy link
Contributor

Do the flat builds not interfere with scope hoisting by the app bundlers? Just wondering, not sure if there is much to gain from that. I presume the bundler would have to figure out statically that there are parts of React that are not used by the app and can be removed, probably a very tall order.

@timdorr
Copy link

timdorr commented Jul 27, 2017

@wmertens The flat bundle is scope hoisted itself. You can continue to hoist it yourself. It's basically just concatenating the modules into one file and ensuring no variable name overlaps. That's fully compatible with any bundler above it.

@aweary
Copy link
Contributor

aweary commented Jul 27, 2017

This is an app that was built from CRA - it is not ejected. This appears to be the only place in which we use enzyme (tests are run with react-scripts test --env=jsdom --coverage). Is there an equivalent of mount and shallow within Jest that I should be using?

For what it's worth, Enzyme will be supporting React 16 just like previous releases. There's a huge refactor underway which includes support for React 16.

@yasserkaddour
Copy link

yasserkaddour commented Sep 26, 2017

Congrats on the release !!
Just so you know http://isfiberreadyyet.com/ is linking to this page instead of the release notes.

@paulocesarpcfj
Copy link

Enzyme still not working yet? I've tried use npm i --save-dev enzyme enzyme-adapter-react-16 but nothing changed.

@bvaughn
Copy link
Contributor Author

bvaughn commented Sep 26, 2017

@paulocesarpcfj Enzyme 3 was released last night with support for React 16. If it's not working, file an issue with details against the Enzyme project.

bvaughn pushed a commit that referenced this issue Sep 27, 2017
* 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
@gaearon gaearon mentioned this issue Oct 4, 2017
16 tasks
@Plash-jindal
Copy link

I have update the react and react-dom packages but after I run the project using webpack-dev-server, I get this error,
ERROR in Entry module not found: Error: Cannot resolve module 'react/lib/ReactComponentBrowserEnvironment'

@gaearon
Copy link
Collaborator

gaearon commented Nov 3, 2017

Search for that string in node_modules. Some library is using an internal React module. As mentioned in release notes in this issue, this has never been supported and will no longer work.

I am locking this issue because RC has been released a long time ago, and is no longer relevant. If you have a problem please file a new issue.

@facebook facebook locked and limited conversation to collaborators Nov 3, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests