search

facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
228.92k stars 46.84k forks source link

React 16 RC #10294

Closed bvaughn closed 7 years ago

bvaughn commented 7 years ago

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:

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

Breaking Changes

Error Handling

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

Scheduling and Lifecycle

Packaging

Known Issues

Updates

dmitrif commented 7 years ago

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 commented 7 years ago

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

verkholantsev commented 7 years ago

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 commented 7 years ago

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

verkholantsev commented 7 years ago

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

bvaughn commented 7 years ago

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

sergeysova commented 7 years ago

Can I import SynteticEvent from flat bundle?

kadikraman commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

https://github.com/diegoddox/react-redux-toastr/issues/150

muhammedMoussa commented 7 years ago

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 commented 7 years ago

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

gaearon commented 7 years ago

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

mridgway commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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.

neurosnap commented 7 years ago

Our large application ran perfectly except for our unit tests that depend on enzyme. This looks like our biggest blocker at this point.

7rulnik commented 7 years ago

Seems that react-dom/server doesn't work correctly with style in production mode . In dev all works fine.

const React = require('react')
const ReactServer = require('react-dom/server')
const foo1 = React.createElement("div", {
  className: "sign-link",
  id: "sign-layout-link",
  style: { position: 'absolute' }
});

ReactServer.renderToString(foo1)
TypeError: re is not a function
    at /Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:7774
    at /Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/fbjs/lib/memoizeStringOnly.js:23:32
    at f (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:2423)
    at b (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:3163)
    at e.renderDOM (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:9665)
    at e.render (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:8762)
    at e.read (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:8452)
    at Object.T [as renderToString] (/Users/v7rulnik/projects/kupibilet/internals/kupibilet.ru/node_modules/react-dom/cjs/react-dom-server.production.min.js:1:4384)
    at repl:1:13
    at ContextifyScript.Script.runInThisContext (vm.js:44:33)
falconmick commented 7 years ago

The server renderer doesn't yet support returning arrays and strings from components.

Does this mean doesn't support them at all? or just as the root component i.e. ssr(<somecom /<<otherComp /<)?

This could be really bad if it does break it as array returns are life, but so is SSR

bvaughn commented 7 years ago

Our large application ran perfectly except for our unit tests that depend on enzyme. This looks like our biggest blocker at this point.

Flarnie and I spoke with Leland about Enzyme this afternoon. Seems like it's in a good spot to be 16-compatible by or before the 16.0 release and we'll be staying in touch about it during the beta.

Daniel15 commented 7 years ago

The server renderer has been completely rewritten, and now offers a streaming mode

Is the streaming mode specific to Node.js (ie. does it use APIs only available in Node), or could it work in other environments too (for example, for people using ReactJS.NET, react-rails or React in Java)?

jlongster commented 7 years ago

This is an error I hit in a moderately sized app.

screen shot 2017-07-26 at 11 12 53 pm

It points to this code:

screen shot 2017-07-26 at 11 13 27 pm

If I open the Object.renderPortal frame it looks like it's in the react-modal library, these lines exactly.

At the very top of that file is does const renderSubtreeIntoContainer = ReactDOM.unstable_renderSubtreeIntoContainer; so this is an unstable API. I can look more into this tomorrow because it very well might be a false positive. I did update both react and react-dom to 16.0.0-beta.1.

I will look more into this tomorrow and see if I can provide more details.

Great work y'all! ❤️

sophiebits commented 7 years ago

@jlongster The code in your screenshot isn't 16 beta 1, but some of the stack frames you cited are. You must have two copies of react-dom, one new and one old. npm ls might help you find why.

jlongster commented 7 years ago

Ah ok, thanks! I will check tomorrow, not at my computer anymore

aickin commented 7 years ago

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

@dmitrif While I think it's certainly conceivable to implement a caching solution in the server renderer, I don't think it's amenable to monkey patching; the renderer is basically all just in one file. If it's really important to you, I'd fork the code (and hopefully consider contributing back!).

It's also worth noting that in some preliminary tests I did, the 16 renderer is 2-2.5x faster than the 15 renderer, so it's possible that you may not have as much of a need for caching.

aickin commented 7 years ago

Does this mean doesn't support them at all? or just as the root component i.e. ssr(<somecom /<<otherComp /<)?

@falconmick I believe it doesn't support them anywhere in the tree right now, but it's a "known issue", which I believe means it should get fixed before release. (Anyone from core team, please feel free to correct me!)

bvaughn commented 7 years ago

@Daniel15 I think /server is browser-only APIs and /node-stream is browser+node APIs. The naming of these entry points isn't great and may change before final.

sophiebits commented 7 years ago

@aickin @falconmick That's the plan! If anyone wants to work on adding that, we'd happily review a PR.

aickin commented 7 years ago

Is the streaming mode specific to Node.js (ie. does it use APIs only available in Node), or could it work in other environments too (for example, for people using ReactJS.NET, react-rails or React in Java)?

@Daniel15 The streaming renderer does indeed depend on the Readable API in Node. For more info on the streaming API, check out its documentation.

However, I should note that the underlying code for the renderer is a function that will output N bytes at a time, which you could in theory call from just about any stream API. If you want to see code that uses this function, check out the implementation of ReactMarkupReadableStream. This is a proceed-at-your-own-risk kind of thing, though, because the internal class (ReactPartialRenderer) is not a supported API and could change at any moment.

aickin commented 7 years ago

@7rulnik Great bug, and I'm able to repro on my machine. I've filed it as #10299. Thanks!

aakashbapna commented 7 years ago

Can I try out React 16 beta with fiber in a react-native project?

bvaughn commented 7 years ago

@aakashbapna Instructions for that will be coming soon. Currently I think you'd have to build from source to try it.

luigiplr commented 7 years ago

Also seeing @7rulnik's issue https://github.com/facebook/react/issues/10294#issuecomment-318231160 regarding style on the server in production mode.

(re is not a function)

mrasoahaingo commented 7 years ago

Hi! i opened an issue on react-virtualized repo #762

image

Thanks!

gaearon commented 7 years ago

Also seeing @7rulnik's issue #10294 (comment) regarding style on the server in production mode.

Fixed by https://github.com/facebook/react/pull/10300. Will go out in next beta after we catch a few more issues.

I believe it doesn't support them anywhere in the tree right now, but it's a "known issue", which I believe means it should get fixed before release.

There’s an open PR for this too: https://github.com/facebook/react/pull/10221

Can I try out React 16 beta with fiber in a react-native project?

Not yet. Please see the above post:

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.)

leecade commented 7 years ago

🔥

TeaSeaLancs commented 7 years ago

We've got some unit tests where we test that the data returned from a react-redux mapStateToProps and mapDispatchToProps conforms to the propTypes of the underlying component.

We do this through the use of react/lib/ReactPropTypesSecret so we can use the PropTypes testing function directly. Is there anything we could do moving forwards to replicate this functionality?

davidfurlong commented 7 years ago

Any docs on this new react-dom/node-stream? Edit: https://github.com/facebook/react/blob/master/docs/docs/reference-react-dom-node-stream.md

gaearon commented 7 years ago

@TeaSeaLancs

We've got some unit tests where we test that the data returned from a react-redux mapStateToProps and mapDispatchToProps conforms to the propTypes of the underlying component.

You can do something like:

React.createElement(YourComponent, propsYouWantToTestWith);

This will trigger PropTypes validation. If there is a failure, it will use console.error() to output the warning. You can override console.error() in tests, and throw on any unexpected errors.

TeaSeaLancs commented 7 years ago

Fair enough but having to stub/monkey patch something as fundamental as console.error() leaves a bit of a sour taste in the mouth :\

gaearon commented 7 years ago

Now that I think of it, actually it’s not necessary. PropTypes provides a first-class API for running checks. In fact it’s what React uses.

If you look at the warning message that you get when you call them directly, it says:

Calling PropTypes validators directly is not supported by the prop-types package. Use PropTypes.checkPropTypes() to call them.

As mentioned in prop-types README:

If you absolutely need to trigger the validation manually, call PropTypes.checkPropTypes(). Unlike the validators themselves, this function is safe to call in production, as it will be replaced by an empty function:

// Works with standalone PropTypes
PropTypes.checkPropTypes(MyComponent.propTypes, props, 'prop', 'MyComponent');

Hope this helps!

jlongster commented 7 years ago

@spicyj You were right, I had two versions of React. I made sure everything was on next and it's mostly working.

I still hit an error in one case. I use the react-modal library, and when try to close the modal it errors:

screen shot 2017-07-27 at 9 52 35 am

This is the line of code where the error is happening. For some reason it looks like this.portal is null.

Unfortunately, I created a small test case to try to reproduce, but that library works fine independently of my app. I don't know if this is 16's fault or not, but it definitely worked with 15. Sorry I can't reproduce in a small test case, but wanted to report this bug in case it gives more context into a possible bug.

TeaSeaLancs commented 7 years ago

@gaearon ... when did that get introduced? I swear I never saw that message :P

gaearon commented 7 years ago

@TeaSeaLancs I think during 15.5 or about that. You’re right it didn’t always exist, sorry!

TeaSeaLancs commented 7 years ago

Fair enough, we started on 15.2 originally.

gaearon commented 7 years ago

@jlongster Any chance you could put breakpoints around this.portal assignments and figure out why this.portal becomes null?