Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

React 16 RC #10294

Open
bvaughn opened this Issue Jul 26, 2017 · 248 comments

Comments

Projects
None yet
Contributor

bvaughn commented Jul 26, 2017 edited by gaearon

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 #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

  • The server renderer crashes in production with inline styles. (#10299, fixed by #10300)
    • Fixed in 16.0.0-beta.2
  • The server renderer doesn't yet support returning arrays and strings from components.
    • Fixed in 16.0.0-beta.3
  • The server renderer still renders data-reactid somewhat unnecessarily. (#10306)
    • Fixed in 16.0.0-beta.3
  • Shallow renderer doesn’t pass context to componentWillReceiveProps (to be fixed by #10342)
    • Fixed in 16.0.0-beta.3
  • There is an issue with 'use strict' in older browsers (#10294 (comment))
    • Fixed in 16.0.0-beta.3
  • In some cases Error: null is reported instead of the real error. (#10321)
    • Fixed in 16.0.0-beta.3
  • There is a report that Google crawler can’t render the page using 16 (link).
    • Fixed in 16.0.0-beta.3
  • Some popular third party libraries won’t work yet (e.g. Enzyme).
  • (Please report more issues in this thread.)

Updates

  • Released 16.0.0-beta.1 on July 24, 2017

  • Released 16.0.0-beta.2 on July 27, 2017

    • Fix a crash in server rendering.
  • Released 16.0.0-beta.3 on August 3, 2017

    • Fix strict-mode function scope problem (#10361)
    • Better error log messaging and cross-origin handling (#10353, #10373)
    • Shallow renderer improvements (#10372, #10342)
    • Edge-case context bugfix (#10334)
    • Single point of entry for server rendering (#10362)
    • etc.
  • Released 16.0.0-beta.4 on August 8, 2017

    • Warn about unresolved function as a child. #10376
    • Remove data-reactid and data-react-checksum from whitelist. #10402
    • New test renderer API features (disabled via feature flag, for now). #10377
    • And some other minor updates to slightly reduce bundle size.
  • Release 16.0.0-beta.5 on 2017-08-08

    • Fix bugs related to unmounting error boundaries #10403
    • Enable new fiber ReactTestRenderer API methods; (previously disabled behind a feature flag) #10410
  • Released 16.0.0-rc.1 on September 6, 2017

  • Released 16.0.0-rc.2 on September 6, 2017

    • Fix bug where React npm packages would throw an exception on startup in browsers not supporting const natively (@sophiebits in #10631)
  • Released 16.0.0-rc.3 on September 14, 2017

    • Report bad dead code elimination to React DevTools (@gaearon in #10702)
    • Fix false positive warning when hydrating SVG after SSR (@gaearon in #10676)
    • Add a warning about non-lowercase custom attributes (@gaearon in #10699)
    • Fix a memory leak (@gaearon in #10680)
    • Remove deprecated entry point for the shallow renderer (@gaearon in #10682)
    • Remove undocumented TestUtils methods (@gaearon in #10681)
    • Add ReactDOM.createPortal() as an “official” API without the unstable prefix (@gaearon in #10675)
    • Don’t repeat Object.assign polyfill twice (@gaearon in #10671)

dmitrif commented Jul 26, 2017 edited

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.

Collaborator

aweary commented Jul 26, 2017

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

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?

Contributor

TrySound commented Jul 26, 2017

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

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

Contributor

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.

LestaD commented Jul 26, 2017

Can I import SynteticEvent from flat bundle?

@clarkbw clarkbw referenced this issue in devtools-html/devtools-core Jul 26, 2017

Closed

[WIP] Trying out react@next #525

kadikraman commented Jul 26, 2017 edited

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! 🎉

Member

gaearon commented Jul 26, 2017 edited

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

LestaD commented Jul 26, 2017 edited

@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)
}

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?

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

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

Member

gaearon commented Jul 26, 2017

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

Contributor

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

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?

Member

gaearon commented Jul 26, 2017 edited

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.

Contributor

wmertens commented Jul 26, 2017

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

Collaborator

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.

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 Jul 27, 2017 edited

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 Jul 27, 2017 edited

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

Contributor

bvaughn commented Jul 27, 2017 edited by sophiebits

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.

Member

Daniel15 commented Jul 27, 2017

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

@twobit twobit referenced this issue in lavrton/react-konva Jul 27, 2017

Closed

Not compatible with new version of React (15.4.0) #44

Contributor

jlongster commented Jul 27, 2017

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! ❤️

Member

sophiebits commented Jul 27, 2017 edited

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

Contributor

jlongster commented Jul 27, 2017

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

@miksansegundo miksansegundo referenced this issue in glenjamin/skin-deep Jul 27, 2017

Closed

Support for React 16 beta #91

Collaborator

aickin commented Jul 27, 2017

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.

Collaborator

aickin commented Jul 27, 2017

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

Contributor

bvaughn commented Jul 27, 2017

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

Member

sophiebits commented Jul 27, 2017

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

Collaborator

aickin commented Jul 27, 2017

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.

Collaborator

aickin commented Jul 27, 2017

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

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

Contributor

bvaughn commented Jul 27, 2017

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

@daochouwangu daochouwangu referenced this issue in daochouwangu/webfrontdaily Jul 27, 2017

Open

2017-07-27 前端日报 #74

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

(re is not a function)

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

image

Thanks!

Member

gaearon commented Jul 27, 2017

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

Fixed by #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: #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 Jul 27, 2017

🔥

@renchap renchap referenced this issue in nygardk/react-share Aug 26, 2017

Merged

Add React 16 to peer dependencies #95

davidfurlong commented Aug 29, 2017 edited

I got a

Uncaught Error: Should have found an error boundary. This error is likely caused by a bug in React. Please file an issue

on react@16.0.0-beta.5

Error log of error that caused the error to be thrown:

Uncaught TypeError: disabled.indexOf is not a function
    at eval (ButtonToggle.js:1)
    at Array.map (<anonymous>)
    at new ButtonToggle (ButtonToggle.js:1)
    at eval (createClassProxy.js:95)
    at instantiate (createClassProxy.js:103)
    at ButtonToggle (eval at proxyClass (createClassProxy.js:NaN), <anonymous>:4:17)
    at mountIndeterminateComponent (vendor.js:59103)
    at beginWork (vendor.js:59301)
    at performUnitOfWork (vendor.js:61261)
    at workLoop (vendor.js:61370)
(anonymous) @ ButtonToggle.js:1
ButtonToggle @ ButtonToggle.js:1
(anonymous) @ createClassProxy.js:95
instantiate @ createClassProxy.js:103
ButtonToggle @ VM4678:4
mountIndeterminateComponent @ vendor.js:59103
beginWork @ vendor.js:59301
performUnitOfWork @ vendor.js:61261
workLoop @ vendor.js:61370
callCallback @ vendor.js:50610
invokeGuardedCallbackDev @ vendor.js:50649
invokeGuardedCallback @ vendor.js:50506
performWork @ vendor.js:61490
batchedUpdates @ vendor.js:61941
performFiberBatchedUpdates @ vendor.js:50957
stackBatchedUpdates @ vendor.js:50948
batchedUpdates @ vendor.js:50962
batchedUpdatesWithControlledComponents @ vendor.js:50975
dispatchEvent @ vendor.js:51185
vendor.js:56979 The above error occurred in the <ButtonToggle> component:
    in ButtonToggle (created by ButtonToggleInput)
    in div (created by ButtonToggleInput)
    in ButtonToggleInput (created by Unknown)
    in div (created by Unknown)
    in div (created by Unknown)
    in Unknown (created by ConnectedField)
    in ConnectedField (created by Connect(ConnectedField))
    in Connect(ConnectedField) (created by Field)
    in Field (created by renderRoles)
    in li (created by renderRoles)
    in ul (created by renderRoles)
    in renderRoles (created by ConnectedFieldArray)
    in ConnectedFieldArray (created by Connect(ConnectedFieldArray))
    in Connect(ConnectedFieldArray) (created by FieldArray)
    in FieldArray (created by EventApplicationForm)
    in form (created by EventApplicationForm)
    in EventApplicationForm (created by Form(EventApplicationForm))
    in Form(EventApplicationForm) (created by Connect(Form(EventApplicationForm)))
    in Connect(Form(EventApplicationForm)) (created by ReduxForm)
    in ReduxForm
    in LocalTranslationProvider (created by EventPage)
    in div (created by EventPage)
    in div (created by EventPage)
    in div (created by Modal)
    in div (created by ModalPortal)
    in div (created by ModalPortal)
    in ModalPortal

Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries.

Its strange because my root component (App) has a componentDidCatch (well technically my root component is a bunch of nested Providers)

    <Route path="/" component={App} onEnter={storeReferrer}>
        //{....app}
    </Route>

Providers

<CookiesProvider>
        <I18nProvider
          languageHandler={languageHandler}
          globals={globalT10s}
          key="i18nprovider"
          debug={false}
        >
          <InstantSearchSSRProvider resultsState={resultsState}>
            <Provider store={store} key="provider">
              <Router
                key={module.hot && new Date()}
                history={history}
                onUpdate={onUpdate}
              >
                {routes}
              </Router>
            </Provider>
          </InstantSearchSSRProvider>
        </I18nProvider>
      </CookiesProvider>

The only different thing about this error that I can think of is that react-modal is rendering the Modal dom elements outside of the dom component that I render into with react-dom. But thats DOM land not react component tree land so I don't see how that could cause the error to not be caught... Also a react component rendering into a DOM element that is outside of the root rendered DOM element feels like it shouldn't work/ isn't a good idea. Is it?

andy-j-d commented Aug 29, 2017 edited

@davidfurlong if you look at the React component tree with your modal open you'll see that it's outside the main tree of your app in a portal.

This is a super basic test app:

image

My initial thought on handling this is to make a generic wrapper around react-modal with an error boundary - something like

You could make a reusable bounded modal, something like

<ReactModal {...props}>
  <ErrorBoundary>
    {props.children}
  </ErrorBoundary>
</ReactModal>

Errors in event handlers are thrown (and logged) twice in development:

https://codepen.io/aranja/pen/15988e2694f8f573d65a77b22276a2fc

@flarnie flarnie changed the title from React 16 beta to React 16 RC Sep 6, 2017

Contributor

flarnie commented Sep 6, 2017

Going to update with the changelog between 16.0.0-beta.5 and 16.0.0-rc.1 in a bit and will collapse the details about previous beta updates.

@samerbuna samerbuna referenced this issue in codingdigest/codingdigest Sep 7, 2017

Open

September 2017 #10

iqbalnurhakim commented Sep 7, 2017 edited

I am trying 16.0.0-rc.1 and got Uncaught SyntaxError: Use of const in strict mode. at this line https://github.com/facebook/react/blob/master/packages/react/index.js#L11 when running on old Android 4 browser.
image

Contributor

flarnie commented Sep 7, 2017

Thanks for reporting @iqbalnurhakim - someone will look into it asap. I would guess this is just a missing transform or polyfill.

Member

sophiebits commented Sep 7, 2017

@iqbalnurhakim Just released 16.0.0-rc.2 with a fix. Can you confirm it's fixed for you?

Member

gaearon commented Sep 7, 2017

@davidfurlong Can you provide a reproducing project please? Bugs like this are very hard to fix without context.

Apologies in advance if this is not the place to ask.

I've been playing around with ErrorBoundary but I can't quite get it to work every time. I've seen the Demo provided by Dan Abramov, but there the errors are thrown explicitly with throw new Error(). I was trying to generate a more typical use case, such as not binding this correctly to an onClick handler - a fairly common mistake.

See my demo, here. Clicking the button generates an Uncaught TypeError but this isn't picked up by the ErrorBoundary. However, other types of errors are caught as expected (e.g doing x++ where x is undefined).

Why is this?

Contributor

Andarist commented Sep 7, 2017

@AnderssonChristian this is probably caused by completely different nature (origin) of those 2 types of errors.

other types of errors are caught as expected (e.g doing x++ where x is undefined).

those are causes synchronously during i.e. calling render method by react

I was trying to generate a more typical use case, such as not binding this correctly to an onClick handler - a fairly common mistake.

This on the other hand is async and not triggered by the component's lifecycle, so its definitely harder to capture it in the same way.

@Andarist yup, that makes sense now. Doing x++ in the event handler does not trigger the ErrorBoundary, while doing the same thing inside render() does trigger it. Thanks!

The blog actually outlines this, but I missed it somehow:

Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

leebenson commented Sep 7, 2017 edited

Note: renderToStream is now renderToNodeStream - @bvaughn, FYI to update "Points of Interest" in your OP.

@leebenson leebenson added a commit to reactql/kit that referenced this issue Sep 7, 2017

@leebenson leebenson 2.8.3
2.8.3 - 2017-09-07
-----------------------------------------------

## React
* Fixes invalid call to `ReactDOMServer.renderToStream()` ->
`renderToNodeStream()` per
facebook/react#10294 (comment)
0b43cae

Why not render to async generator?

?

@leebenson why a node specific object when you can use an ES protocol?

Contributor

bvaughn commented Sep 7, 2017

Yes, the ReactDOMServer methods were renamed to renderToNodeStream and renderToStaticNodeStream in PR #10425.

This issue was created for Beta and this happened between Beta and RC, but I've updated the description accordingly.

Collaborator

aickin commented Sep 7, 2017

Why not render to async generator?

It's an interesting idea and certainly possible for future releases; I'm fairly certain it wouldn't be very hard to write given the current implementation.

That being said, server rendering is mostly done in Node, and there were other projects in userland (rapscallion, react-dom-stream) that explored async rendering and rendered to Node streams, and most Node web servers deal in streams already, so it feels like a reasonable API choice to me. Of course, I'm one of the contributors, so I would think that ;) .

@aickin as long as it supports back pressure it can be ported to any of these interfaces

Member

gaearon commented Sep 7, 2017

Let's keep this thread focused on issues in the RC. It would be better to discuss design of specific APIs in separate issues so that the discussion doesn't get lost when the stable version is out.

brettstack commented Sep 8, 2017 edited

Will async rendering address the Server Side Rendering issue where you want to fetch data from a remote source so that the server renders the component with the fetched data? I'm able to work around this, but I like removing work-arounds :)

EDIT: @gaeron answered this question here FormidableLabs/rapscallion#51 (comment) in July - "It might [fall on the React roadmap in the future]. @sebmarkbage was looking into this."

hgossler commented Sep 8, 2017

I am a bit confused about the default behavior of an ErrorBoundary component (i.e. one that implements componentDidCatch) always logging the caught error to the console. Shouldn't it be the programmer's responsibility to log or somehow handle the error, just like it is with a normal try-catch block?

Member

gaearon commented Sep 8, 2017

It is intentional because it is too easy to accidentally swallow errors which is already a big problem in React apps. We don't encourage using errors for control flow or normal situations. Yes, please log them to analytics in production, but in development we will display errors in the console because they always indicate a bug in your code that needs to be fixed.

Contributor

koba04 commented Sep 8, 2017

Portal is exposed as ReactDOM.unstable_createPortal.
Will it be renamed to ReactDOM.createPortal or does it mean that Portal is an unstable feature in v16?

Member

sophiebits commented Sep 8, 2017

It was always intended to have the unstable_ prefix in React 16. We're only intending to fix bugs in the RC before the final release, no other changes. (That's what RC means to our team.) The API will likely not change much in React 17 but might be slightly different.

Contributor

koba04 commented Sep 12, 2017

Portal became a stable feature🎉 #10675
unstable_createPortal is also supported until v17.

Member

sophiebits commented Sep 12, 2017

We changed our minds today. :)

winterbe commented Sep 12, 2017 edited

I've switched my current project from React 15 to React 16 RC2 and it's working like charm. Thanks for all your effort. 👏

However I've noticed one thing. I've switched webpack to devtool: 'cheap-module-source-map' but I still get this stackframe in case of a render error:

Uncaught (in promise) Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (react-dom.development.js?cada:1355)
    at invokeGuardedCallback (react-dom.development.js?cada:1205)
    at performWork (react-dom.development.js?cada:12808)
    at batchedUpdates (react-dom.development.js?cada:13262)
    at performFiberBatchedUpdates (react-dom.development.js?cada:1656)
    at stackBatchedUpdates (react-dom.development.js?cada:1647)
    at batchedUpdates (react-dom.development.js?cada:1661)
    at batchedUpdatesWithControlledComponents (react-dom.development.js?cada:1674)
    at reactionScheduler (mobx.module.js?cbdf:3090)
    at runReactions (mobx.module.js?cbdf:3066)

Any hints?

Contributor

bvaughn commented Sep 12, 2017

@winterbe Are you loading React from a CDN? and if so, have you checked to ensure the crossorigin attribute is set?

@monkindey monkindey referenced this issue in dvajs/dva Sep 13, 2017

Closed

dva counter 例子优化 #1213

It's a shame that React 16 beta is still not working with enzyme. A lot of errors on Karma console after trying to update to v16. Have to downgrade.

Member

gaearon commented Sep 13, 2017

It is written explicitly in the first post:

Some popular third party libraries won’t work yet (e.g. Enzyme).

The folks working on Enzyme at Airbnb took an opportunity to rewrite it to solve many longstanding issues, and plan to release the rewrite alongside React 16. Please give them some more time :-)

Contributor

bvaughn commented Sep 13, 2017

It's a shame that React 16 beta is still not working with enzyme.

The folks working on Enzyme at Airbnb took an opportunity to rewrite it to solve many longstanding issues, and plan to release the rewrite alongside React 16. Please give them some more time

From what I hear, they're very close. 😄

Member

gaearon commented Sep 14, 2017 edited

React 16 RC 3 is out with more fixes:

Please test it:

yarn add react@next react-dom@next

Or:

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

This is getting really close to what we’ll end up shipping unless you folks report more bugs. :-)

Contributor

KyleAMathews commented Sep 15, 2017

Is it recommended we ship a polyfill for requestAnimationFrame to production? If so, what's the recommended polyfill?

Contributor

bvaughn commented Sep 15, 2017 edited

Is it recommended we ship a polyfill for requestAnimationFrame to production?

That depends on which browsers you target. RAF has pretty good support at this point, but a polyfill is probably still a pretty good idea.

If so, what's the recommended polyfill?

This isn't an "official" recommendation but I've personally used raf in past projects.

TryNFail commented Sep 15, 2017 edited

Is v16 stable enough to use in Production?

Member

gaearon commented Sep 15, 2017

Yes. We use it in production. The final release is waiting for documentation to catch up.

styfle commented Sep 15, 2017

Very cool! I just checked and facebook.com is living on the edge!

console.log(require('React').version)
// 16.0.0-rc.2

image

@bvaughn I'm loading React via webpack from local bundle (no cdn).

Love componentDidCatch and the improved error messages! Would also like to be able to call this.throw(error). Would be a nice way to propagate async errors up the tree.

Great work though!

@flarnie flarnie added a commit to flarnie/react that referenced this issue Sep 18, 2017

@flarnie flarnie First shot at updating changelog for 16.0
**what is the change?:**
Added an 'unreleased' section to the changelog with info from facebook#10294

**why make this change?:**
To get things set for the 16.0 release.

**test plan:**
Visual inspection

**issue:**
facebook#8854
dcbbeae
Contributor

bvaughn commented Sep 19, 2017

@winterbe If you could create a repro with us and share it (via a new issue) that would be helpful.

Contributor

lelandrichardson commented Sep 20, 2017

FYI, if people would like to try this with enzyme, enzyme has betas published now: enzyme@3.0.0-beta.6 currently.

m-salamon commented Sep 20, 2017 edited

this will fix the issue of bootstrap 4 which uses flexbox and when returning a parent div in the component from render it will break the css grid, with React 16 we can return multiple components from render as an array (without a parent div).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment