-
Notifications
You must be signed in to change notification settings - Fork 48.2k
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
Comments
In regards to:
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:
Thank you. |
Maybe @aickin can comment on the feasibility of integrating a caching solution directly into the server renderer? |
Is there any way to manually enable asynchronous rendering in this beta? |
@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? |
@verkholantsev We'll provide info about enabling async once we think it's ready for testing. We're still experimenting on it internally. |
Can I import SynteticEvent from flat bundle? |
This might be interesting: just tried it in our codebase. Using |
Not currently. What is your use case for it?
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). |
Ex.: I want to pass // 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:
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 |
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. |
Let’s keep this discussion focused on 16 Beta. Thanks. |
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? |
I think it’s
This is sort of up in the air right now. I think we’ll make a decision before shipping next beta. |
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. |
@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. |
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. |
Congrats on the release !! |
Enzyme still not working yet? I've tried use npm i --save-dev enzyme enzyme-adapter-react-16 but nothing changed. |
@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. |
* 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
I have update the react and react-dom packages but after I run the project using webpack-dev-server, I get this error, |
Search for that string in 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. |
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:
Or:
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:
React also depends on
requestAnimationFrame
(even in test environments). A simple shim for testing environments would be:Points of Interest
ReactDOMServer.renderToNodeStream()
andReactDOMServer.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 nodata-reactid
anymore! This server renderer code is still very new, so it is likely to have issues. Please report them.ReactDOM.hydrate
instead ofReactDOM.render
if you're reviving server rendered HTML. Keep usingReactDOM.render
if you're just doing client-side rendering.Breaking Changes
Error Handling
unstable_handleError
, but has been renamed tocomponentDidCatch
.You can learn more about the new error handling behavior here.
Scheduling and Lifecycle
ReactDOM.render()
andReactDOM.unstable_renderIntoContainer()
now returnnull
if called from inside a lifecycle method.setState
:setState
with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render.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 aftercomponentDidMount
/componentDidUpdate
instead of after all components have rendered.<A />
with<B />
,B.componentWillMount
now always happens beforeA.componentWillUnmount
. Previously,A.componentWillUnmount
could fire first in some cases.ReactDOM.unmountComponentAtNode
. See this example.componentDidUpdate
lifecycle no longer receivesprevContext
param. (See Pass prevContext param to componentDidUpdate #8631)componentDidUpdate()
because DOM refs are not available. This also makes it consistent withcomponentDidMount()
(which does not get called in previous versions either).unstable_batchedUpdates()
anymore.Packaging
react/lib/*
andreact-dom/lib/*
anymore. Even in CommonJS environments, React and ReactDOM are precompiled to single files (“flat bundles”). If you previously relied on undocumented React internals, and they don’t work anymore, let us know about your specific case in this issue, and we’ll try to figure out a migration strategy for you.react-with-addons.js
build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them.React.createClass
is now available ascreate-react-class
,React.PropTypes
asprop-types
,React.DOM
asreact-dom-factories
,react-addons-test-utils
asreact-dom/test-utils
, and shallow renderer asreact-test-renderer/shallow
. See 15.5.0 and 15.6.0 blog posts for instructions on migrating code and automated codemods.react/dist/react.js
→react/umd/react.development.js
react/dist/react.min.js
→react/umd/react.production.min.js
react-dom/dist/react-dom.js
→react-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. (React 16 server renderer breaks with style object in prod mode #10299, fixed by Fix ReactPartialRenderer in production #10300)16.0.0-beta.2
The server renderer doesn't yet support returning arrays and strings from components.16.0.0-beta.3
The server renderer still rendersdata-reactid
somewhat unnecessarily. (Server-rendered HTML polluted with empty data-reactid attributes #10306)16.0.0-beta.3
Shallow renderer doesn’t passcontext
tocomponentWillReceiveProps
(to be fixed by Shallow renderer passes context to componentWillReceiveProps #10342)16.0.0-beta.3
There is an issue with'use strict'
in older browsers (React 16 RC #10294 (comment))16.0.0-beta.3
In some casesError: null
is reported instead of the real error. ("Error: null" in the captured error warning due to cross-origin issues #10321)16.0.0-beta.3
There is a report that Google crawler can’t render the page using 16 (link).16.0.0-beta.3
Updates
Released
16.0.0-beta.1
on July 24, 2017Released
16.0.0-beta.2
on July 27, 2017Released
16.0.0-beta.3
on August 3, 2017Released
16.0.0-beta.4
on August 8, 2017Release
16.0.0-beta.5
on 2017-08-08Released
16.0.0-rc.1
on September 6, 2017undefined is not a function (evaluating 'owner.getName()')
(@fxfactorial in Fixes #10443 #10448 and @bvaughn in RN findNodeHandle no longer adds props directly to read-only owner #10520)<select>
elements defaulted to first option, even when it was 'disabled'. (@aweary in Default to first non-disabled option for select elements #10456 and @nhunzaker in Add test fixtures to cover disabled selected options #10142)Released
16.0.0-rc.2
on September 6, 2017const
natively (@sophiebits in Remove "const" in uncompiled code #10631)Released
16.0.0-rc.3
on September 14, 2017TestUtils
methods (@gaearon in Remove undocumented TestUtils methods #10681)ReactDOM.createPortal()
as an “official” API without the unstable prefix (@gaearon in Make ReactDOM.createPortal() official #10675)Object.assign
polyfill twice (@gaearon in Share Object.assign polyfill between UMD builds #10671)The text was updated successfully, but these errors were encountered: