Upgrade your component to React 16

upgrade-components-to-react-16.md

Upgrade Components To React 16

React 16 includes a number of small breaking changes. They only affect uncommon use cases and we don’t expect them to break most apps. So if you have apps running in 15.6 without any warnings, upgrade to 16 should be easy for you.

Reference: https://reactjs.org/blog/2017/09/26/react-v16.0.html

Changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md

These are the things you need to be aware of when updating from React 15 to 16:

Deprecated Packaging List

Below are the lists for deprecations in React 16:

• No react/lib/* and react-dom/lib/* anymore
• Discontinued React Addons package, please migrate away these packages
  • react-addons-create-fragment => React 16 will have first-class support for fragment
  • react-addons-css-transition-group => react-transition-group/CSSTransitionGroup
  • react-addons-linked-state-mixin => Explicitly set the value and onChange handler instead
  • react-addons-pure-render-mixin => Use React.PureComponent instead
  • react-addons-shallow-compar => Use React.PureComponent instead
  • react-addons-transition-group => Use react-transition-group/TransitionGroup instead
  • react-addons-update => Use immutability-helper instead, a drop-in replacement
  • react-linked-input => Explicitly set the value and onChange handler instead
• Discontinued support for react-with-addons, will be removed in React 16
• react-addons-perf no longer work
• React.createClass is now available as create-react-class
• React.PropTypes is now available as prop-types
• React.DOM is now available as react-dom-factories
• react-addons-test-utils as react-dom/test-utils
• shallow renderer as react-test-renderer/shallow
• 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
• If you’re reviving server-rendered HTML, use ReactDOM.hydrate instead of ReactDOM.render. Keep using ReactDOM.render if you’re just doing client-side rendering.

Warnings & Errors

These are the common warnings & errors that you see when upgrading to React 16.

Warning / Error 1:

Message

AssertionError: expected '<div data-reactroot="">Page</div>' to include 'data-reactid'

Solution

In React 15, each HTML element in an SSR document has a data-reactid attribute. In React 16, however, all of the IDs have been removed from the markup, so the HTML for that same snippet is considerably simpler. To resolve this, remove the conditions that use data-reactid:

expect(result.html).to.contain("data-reactroot");

Warning / Error 2:

Message

Error: Set is undefined

Solution

React 16 depends on the collection types Map and Set. If you support older browsers (e.g. IE < 11), you may need to include a global polyfill in your bundled application, such as core-js or babel-polyfill.

You can use core-js to support older browsers as:

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

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

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

Checkout Javascript Environment Requires for more information.

Warning / Error 3:

Prior to React 16, any error in the UI would crash the whole application. Error Boundary feature was introduced to tackle this problem. It's a special component that capture errors inside their subtree and display a fallback UI in its place.

Checkout Better error handling for more information.

Warning / Error 4:

With react 16, You can now return an array of elements or strings from a component’s render method.

Checkout New Render Return Type for more information.

Warning / Error 5:

Message

Warning: Invalid DOM property `myCustomAttribute`.

Solution

As of React 16, custom DOM attributes are fully supported. React 15 custom attribute was removed, but React 16 will keep those attributes. However, if there is a custom attribute in camel case, React 16 will give the above warnings.

Checkout DOM Attributes in React 16 for more information.

React 16 Upgraded WML Components List

Find the upgraded components and its latest versions:

https://confluence.walmart.com/display/CEAP/Upgrade+to+React+16